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图 6-8: 因为 颜色 数 不 够 ， 这 张 GIF 图 6-9; 屏幕 上 一 幅 图 像 中 的 单个 
图 像 看 上 去 是 失真 的 像素 放大 后 的 样子 
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图 6-10: 以 实际 尺寸 显示 的 图 像 
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B 6-11: 大 于 实际 尺寸 显示 的 图 像 
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Colors 


Colors are used to color code sections, define lower level content and direct attention to 
important content. 


Primary Colors 


Dark Blue Light Blue Lime Green 
Background Used for Used for 
colors used in smaller body download 
the masthead copy, used in buttons and 
#0678BE the masthead to indicate 
#53BOEB customization 
#96BC44 


Secondary Colors 


Navy Blue Light Navy Pale Gray 
Background Blue Background 
color used in Background color used in 
the top color used in the footer, 
navigation the lower advertising 
#064771 navigation and to 
#0D7DC1 highlight 
important 
information. 
#F6F6F2 


&j 7-10; Drupal.org 风格 指南 中 的 一 页 列 出 了 颜色 (主要 颜色 、 次 要 颜色 及 信息 
颜色 ) ; 每 个 条 目 给 出 颜色 名 、 十 六 进 制 值 及 其 用 途 ( 比 如， 深蓝 色 ， 
#0678BE， 用 作 刊 头 的 背景 色 ) 

















B 7-12: Adobe Edge Reflow 
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内 容 提 要 
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2007 ^£, iPhone 的 发 布 对 于 网 站 设计 来 说 是 一 个 转折 点 ， 网 站 设计 师 们 突然 失去 了 对 画布 
(我 们 在 上 面 设计 网 站 ) 的 控制 。 此 前 ， 网 站 只 是 在 显示 器 屏幕 上 供 人 浏览 ， 尽 管 屏幕 尺 
寸 有 所 不 同 ， 但 差别 并 不 是 那么 大 。 而 现在 ， 我 们 怎样 才能 使 网 站 在 iPhone 这 么 小 的 屏幕 
Eft AT SEO 


























在 开始 的 一 段 时 间 里 ， 我 们 制作 了 专门 针对 iPhone 屏幕 尺寸 进行 了 优化 的 移动 网 站 ， 其 独 
立 于 我 们 的 “和 常规” 网站。 同时 维护 两 个 站 点 还 不 是 那么 粳 ， 但 大 量 不 同 屏幕 尺寸 的 手机 
很 快 涌现 出 来 ， 然 后 是 平板 电脑 以 及 更 小 号 的 平板 电脑 ， 我 们 终于 意识 到 不 可 能 为 每 种 可 
能 的 屏幕 尺寸 都 制作 一 个 网 站 。 








我 们 需要 一 种 适用 于 所 有 屏幕 尺寸 的 解决 方案 ， 需 要 一 种 设计 网 站 的 方法 ， 使 网 站 能 够 自 
动 适 配 各 种 显示 屏幕 。 














一 时 间 各 种 创意 层出不穷 ， 不 和 久之 后 响应 式 网 站 设计 脱颖而出 。 它 是 一 种 灵活 的 不 依赖 于 
国定 屏幕 尺寸 的 网 站 设计 方法 ， 能 够 检测 屏幕 的 大 小 并 调整 设计 ， 从 而 针对 有 具体 设备 提供 
最 佳 的 视觉 体验 。2010 年 ，Ethan Marcotte 在 4 List Apart 上 首次 发 表 了 关于 响应 式 网 站 设 
计 的 文章 (http://alistapart.com/article/responsive-web-design) 。 




















如 其 他 新 技术 一 样 ， 响 应 式 网 站 设计 一 开始 并 不 被 人 接受 ， 许 多 人 不 断 辩 称 一 甚至 于 现 
在 某 些 人 还 在 这 么 做 一 一 我 们 需要 为 手机 单独 创建 网 站 。 但 随 着 今天 市 场 上 设备 的 激增 ， 
很 明显 ， 我 们 不 能 依赖 于 一 种 手机 模型 并 将 其 作为 设计 标杆 。 我 们 的 设计 要 能 够 适应 所 有 
设备 ， 而 这 些 设备 的 屏幕 尺寸 各 不 相同 。 























而 与 此 同时 ， 响 应 式 设计 也 在 不 断 发 展 。 它 不 再 仅仅 是 适应 屏幕 尺寸 ， 也 能 适应 不 同 的 设 
性 能 ， 如 触摸 屏 、 视 网 膜 显示 屏 ， 以 及 慢 速 连接 。 




















在 2014 年 ，58% 的 美国 成 年 人 拥有 一 部 功能 丰富 并 允许 用 户 完 全 访问 网 络 的 智能 手机 ， 
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这 些 手 机 搭载 了 iOS, Android, Windows Phone 等 操作 系统 ,' H 3596 的 美国 成 年 人 拥有 一 
部 平板 电脑 。? 我们 有 令 人 惊叹 的 硬件 设备 ， 而 响应 式 设 计 能 帮助 我 们 充分 利用 网 络 。 
然而 ， 尽 管 大 多 数 美国 成 年 人 都 有 智能 手机 ， 但 仍 有 32% 受 访 者 的 手机 不 是 智能 手机 。 这 
之 中 的 很 多 人 用 手机 访问 网 络 时 只 能 使 用 功能 受 限 的 浏览 器 ， 这 种 浏览 器 无 法 如 他 们 希望 
的 那样 显示 所 有 网 站 。 响 应 式 网 站 设计 也 是 这 种 情况 下 的 一 种 解决 方案 。 

















响应 式 网 站 设计 一 开始 只 是 设计 简单 的 、 注 重 内 容 的 站 点 (不 依赖 CSS 或 JavaScript), 使 
其 能 显示 在 几乎 所 有 的 联网 设备 上 。 在 此 基础 之 上 ， 这 种 设计 通过 渐进 式 增 强 一 一 响应 式 
网 站 设计 正 是 基于 此 一 一 针对 具体 的 显示 屏 尺 寸 以 及 设备 功能 进行 优化 。 因 而 ， 功 能 手机 
也 即 功能 有 限 的 旧式 手机 ) 只 能 获得 那些 它们 能 使 用 的 内 容 ， 而 相对 来 说 较 新 的 智能 设 
所 访问 的 网 站 则 具有 丰富 的 设计 、 完 美 适 配 其 屏幕 的 界面 ， 设 备 功能 被 充分 利用 。 


向 应 式 网 站 设计 使 我 们 有 能 力 为 所 有 用 户 呈 现 最 好 的 网 站 ， 而 不 管 他 们 具体 使 用 什么 设 
。 网 络 对 每 个 人 应 该 都 是 可 用 的 ， 而 响应 式 设计 将 指导 我 们 做 到 这 一 点 。 
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创建 响应 式 网 站 并 不 仅仅 是 学 习 几 段 新 代 码 那么 简单 。 它 还 包括 重新 审视 网 站 构想 方式 ， 
关注 用 户 体 验 ， 并 确保 内 容 和 功能 不 是 在 设计 完成 之 后 才 加 上 去 的 。 


我 们 还 必须 改变 网 站 制作 方式 ， 过 渡 到 一 个 涉及 设计 师 、 开 发 者 和 其 他 团队 成 员 的 更 具 协 
作 性 的 过 程 中 去 。 


我 们 需要 学 习 一 些 新 的 代码 ， 但 响应 式 设 计 并 不 是 一 种 新 的 编程 语言 ， 创 建 一 个 响应 式 网 
站 只 需要 HTML、CSS， 有 时 再 加 点 JavaScript。 如 果 你 已 经 知道 如 何 制作 网 站 ， 那 么 本 书 
中 讲 到 的 大 部 分 内 容 对 你 来 说 都 会 很 熟悉 。 你 需要 记 住 ， 在 创建 一 个 响应 式 网 站 时 ，90% 
的 工作 与 创建 非 响应 式 网 站 时 是 一 样 的 。 但 除了 增加 少许 新 技术 ， 你 需要 掌握 正确 的 基础 
知识 ， 使 用 结构 恰当 、 合 乎 规范 的 标记 (HTML 和 CSS)。 如 果 没 有 坚实 的 基础 ， 你 难以 
确信 自己 的 网 站 能 正确 工作 并 在 各 种 设备 上 恰当 地 显示 。 


如 果 你 从 事 与 建 设 网 站 相关 的 工作 ， 不 管 是 一 名 Web 设计 师 、 开 发 人 员 、 内 容 策划 、 用 户 
体验 设计 师 、 网 站 负责 人 、IT 主管 ， 还 是 从 事 其 他 任何 涉及 创建 和 维护 网 站 的 工作 ， 你 都 
将 从 本 书 中 知晓 : 响应 式 设 计 的 工作 原理 、 怎 样 调 整 自己 的 工作 流程 以 适应 响应 式 设 计 ， 
以 及 如 何 创建 对 任何 设备 都 能 提供 最 佳 设 计 与 用 户 体验 的 响应 式 网 站 。 





































































































注 1: 完整 报告 请 查看 Susannah Fox 和 Lee Rainie 发 表 的 “The Web at 25 in the U.S.", 皮 尤 互联 网 研究 项 目 ， 
2014 年 2 月 27 日 (http://www.pewinternet.org/2014/02/27/the-web-at-25-in-the-u-s/) 。 

注 2: 更 多 信息 请 查看 Lee Rainie and Aaron Smith 发 表 的 “Tablet and E-reader Ownership update 2013", JE 
尤 互联 网 研究 项 目 ，2013 年 10 月 18 日 (http//www.pewinternet.org/2013/10/18/tablet-and-e-reader- 


ownership-update/) 。 
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组 织 结构 
本 书 分 为 四 部 分 。 


第 一 部 分 解释 了 什么 是 响应 式 设计 ， 以 及 它 与 其 他 网 站 设计 方法 有 何不 同 。 我 们 也 将 介绍 
如 何 创 建 弹性 内 容 ， 并 确保 它们 能 很 好 地 工作 于 响应 式 网 站 。 














第 二 部 分 概述 了 构建 响应 式 站 点 的 基础 知识 。 我 们 将 学 习 一 小 部 分 HTML 和 CSS 知识 ， 
它们 是 让 网 站 正确 工作 的 关键 。 然 后 ， 我 们 深入 介绍 响应 式 设计 的 核心 一 一 媒体 查询 。 最 
后 ， 我 们 会 看 看 在 响应 式 网 站 中 如 何 处 理 图 像 。 


第 三 部 分 带 大 家 看 看 响应 式 设计 的 工作 流程 ， 即 按部就班 创建 一 个 响应 式 网 站 的 过 程 ， 它 
涵盖 了 从 项 目 启动 会 议 开始 直至 网 站 上 线 运行 的 内 容 。 之 后 我 们 将 进一步 从 用 户 体验 的 角 
度 探讨 响应 式 设 计 ， 审 视 如 何 确保 网 站 能 在 不 同 的 输入 方式 〈 比 如 触摸 ) 下 工作 ， 以 及 如 
何 确 保 网 站 对 所 有 用 户 都 是 功能 完好 的 ， 包 括 那 些 使 用 辅助 技术 的 用 户 。 


最 后 ， 第 四 部 分 深入 研究 那些 对 于 响应 式 网 站 需 特别 考虑 的 设计 元 素 。 我 们 首先 从 文字 排 
版 开始 讲 起 ， 这 是 确保 内 容 在 不 同 尺 寸 的 屏幕 上 都 可 读 的 关键 。 然 后 ， 我 们 看 看 如 何 编写 
响应 式 导 航 和 页 头 。 最 后 ， 我 们 会 讨论 响应 式 设计 的 一 个 大 问题 一 一 性 能 ， 因 为 我 们 尝试 
让 用 户 即使 在 低速 连接 上 也 能 在 合理 的 时 间 内 加 载 完 网 站 。 


目标 读者 
本 书 适合 每 一 位 网 站 从 业 人 员 阅 读 参 性， 任何 经 验 水 平 的 人 都 能 够 读 懂 本 书 。 


如 果 你 是 一 名 已 经 非常 熟悉 HTML 和 CSS 的 开发 人 员 ， 那 么 其 中 一 些 内 容 对 你 来 说 一 定 
不 陌生 一 一 响应 式 网 站 设计 与 非 响应 式 网 站 设计 有 很 多 相同 之 处 (但 区 别 总 是 存在 的 )。 
如 果 你 在 这 方面 没有 任何 经 验 ， 也 不 必 担 心 ， 本 书 将 会 带领 你 从 最 基本 的 知识 开始 学 习 ， 
同时 从 设计 角度 综述 响应 式 设计 的 方方面面 。 


0 果 你 从 未 使 用 过 HTML 和 CSS， 那 么 必须 去 全 面 理 解构 成 一 个 响应 式 网 站 所 必需 的 代 
码 ， 以 及 它们 是 如 何 工 作 的。 不 过 ， 本 书 并 不 是 一 本 HTML 或 CSS 入 门 书 ， 所 以 其 中 每 
个 概念 的 介绍 都 相当 简洁 ， 不 涉及 太 多 细节 。 如 果 想 学 习 HTML 和 CSS， 你 应 该 参考 其 他 
书籍 和 资源 以 进行 更 深入 地 学 习 。 但 如 果 你 在 工作 中 并 不 需要 编写 实际 的 代码 ， 只 是 想 了 
解 响应 式 设计 的 工作 原理 ， 本 书 也 定 将 满足 你 的 需求 。 

如 果 你 介 于 新 手 和 老手 之 间 ， 本 书 将 提示 你 制作 一 个 网 站 的 所 有 事项 ， 并 向 你 展示 响应 式 
设计 与 非 响 应 式 设计 的 不 同 之 处 。 你 所 看 到 的 不 仅 是 代码 ， 还 有 对 设计 注意 事项 的 考量 以 
及 响应 式 设计 的 工作 原理 。 
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联系 我 们 
请 把 对 本 书 的 意见 和 疑问 发 给 出 版 社 。 


美 国 : 
O'Reilly Media, Inc. 
1005 Gravenstein Highway North 
Sebastopol, CA 95472 

m 国 : 
北京 市 西城 区 西直门 南大 街 2 RATE C 座 807 (100035) 
奥 莱 利 技术 咨询 (北京 ) 有 限 公 司 


O'Reilly 的 每 一 本 书 都 有 专属 网 页 ， 你 可 以 在 那儿 找到 本 书 的 相关 信息 ， 包 括 勘误 表 、 示 
例 代码 以 及 其 他 信息 。 本 书 的 网 站 地 址 是 : 
http://shop.oreilly.com/product/0636920029199.do 






































你 可 以 在 这 里 下 载 本 书 的 所 有 代码 示例 : 


http://www.learningrwd.com/ 





对 于 本 书 的 建议 和 技术 性 问题 ， 请 发 送 电子 邮件 到 : 


bookquestions@oreilly.com 








要 了 解 更 多 O'Reily 图 书 、 培 训 课程 、 会 议和 新 闻 的 信息 ， 请 访问 以 下 网 站 


http://www.oreilly.com 








我 们 在 Facebook 的 地 址 如 下 : http://facebook.com/oreilly 





请 关注 我 们 的 Twitter 动态 : http://twitter.com/oreillymedia 


我 们 的 YouTube 视频 地 址 如 下 : http://www.youtube.com/oreillymedia 


致谢 

首先 最 想 感 谢 的 是 Scott Berkun， 他 在 2012 年 于 An Event Apart Seattle? 上 所 做 的 演讲 促使 
我 辞去 了 办 公 室 的 工作 ， 从 而 能 够 去 做 更 有 意义 的 事情 。 阅 读 Scot 的 《演讲 之 禅 : 一 位 
技术 演讲 家 的 自白 》( 英 文 版 由 O'Reilly 出 版 ) 一 书后 ， 我 开始 尝试 做 关于 响应 式 设计 的 
演讲 ， 这 给 我 带 来 了 很 多 机 会 。Scott 还 鼓励 和 建议 我 在 写 书 这 条 道路 上 走 下 去 ， 并 把 我 介 
绍 给 了 他 在 O'Reilly 出 版 社 的 编辑 (也 成 了 我 这 本 书 的 编辑 )。 没 有 Scott， 我 很 可 能 仍 郁 
郁 寡 欢 地 有 呆 在 某 个 办 公 室 隔 间 中 ， 你 也 就 不 会 读 到 这 本 书 了 。 




















注 3: An Event Apart 是 为 期 两 天 的 Web 设计 会 议 ， 面 向 所 有 拥有 激情 的 从 业者 。 
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感谢 O'Reilly 出 版 社 的 
在 本 书写 作 期 间 ， 我 结 

















Mary Treseler 及 其 他 参与 本 书 出 版 过 程 的 所 有 工作 人 员 。 





了 婚 并 移居 到 了 一 个 新 的 国家 。 我 的 丈夫 AJ. Kandy， 对 于 在 这 些 

















重大 的 人 生变 化 中 还 稀里糊涂 地 想 着 要 写 书 的 我 一 直 抱 有 极 大 的 耐心 。 我 何其 冬运 能 与 这 








世上 最 棒 的 男人 结 为 伴侣 。 











写作 一 本 这 方面 的 书 。 

















当然 ， 也 非常 感谢 Ethan Marcotte， 设 有 他 提出 的 啊 应 式 设计 理念 ， 我 也 不 会 在 今天 想 要 





感谢 Matt Bradley 很 早 之 前 教 我 HTML。 


有 儿 个 人 在 我 的 职业 生涯 中 竭尽 所 能 地 帮助 我 朝 正 确 的 方向 前 进 ， 极 其 感谢 他 们 的 帮助 : 
Dan Brown、 Jeffrey Zeldman、Vera Rhoads 和 Cory Lebson。 


也 要 感谢 一 路 以 来 许 





多 给 我 帮助 ， 给 我 鼓励 或 建议 的 人 们 : Theresa Amato, Melissa 


Ballowe, Chuck Borowicz, Erica Ciesielski Chaikin, Glennette Clark, Sibyl Edwards, 
Veronica Erb, Brad Frost, Robert Hoekman, Jr., Tim Kadlec, Dave Mankoff, Karen 
McGrane, Jeff Popovich, Chris Schmitt, Jared Spool, Anna Storkson, Sandy Tetreault, 
Estelle Weyl。 当 然 ， 还 要 感谢 我 的 父母 。 


感谢 所 有 在 聚会 和 其 他 
游 美国 东北 部 和 中 西部 








团体 中 认识 的 人 们 ， 我 有 幸 与 他 们 一 起 讨论 响应 式 设计 。 我 开车 周 





时 玩 得 很 开心 ， 还 认识 了 那么 多 了 不 起 的 人 。 希 望 将 来 能 去 更 多 的 


地 方 旅行 ， 因 为 我 想 要 结识 太 多 的 人 。 





第 一 部 分 





啊 应 式 设计 基础 


第 1 章 


什么 是 响应 式 设计 





现在 ， 网 络 世 界 中 的 所 有 人 几乎 都 听 说 过 响应 式 网 页 设计 〈 通 常 称 为 RWD， 即 Responsive 
Web Design 的 缩写 ) ， 但 大 部 分 人 并 没有 很 好 地 理解 它 是 什么 。 


在 本 章 中 ， 你 将 学 习 响 应 式 网 站 的 基础 知识 。 之 后 ， 我 们 将 简 述 网 页 设计 的 简 史 ， 以 便 你 
理解 响应 式 设 计 的 思想 来 自 哪里 ， 以 及 它 与 目 网 页 设计 方式 之 间 的 差异 。 


我 们 还 会 讨论 为 什么 对 于 制作 能 很 好 地 工作 于 不 同 设备 与 屏幕 尺寸 的 网 站 而 言 ， 啊 应 式 设 
计 通 常 是 最 佳 选择 ， 以 及 为 何 从 长 远 来 说 它 意味 着 更 少 的 工作 。 我 们 也 会 介绍 选择 啊 应 式 
设计 的 一 个 不 太 明 显 的 效果 : 它 对 你 的 搜索 引擎 排名 的 影响 。 


1.1 一 点 儿 基 础 


如 果 你 拿 起 本 书 ， 是 因为 你 昕 说 过 响应 式 设计 ， 但 还 不 是 很 明白 它 到 底 是 什么 ， 本 市 将 帮 
助 你 了 解 响应 式 设计 的 基本 知识 。 


即使 你 有 一 定 的 响应 式 设计 经 验 ， 也 可 能 觉得 很 难 用 通俗 的 语言 向 别人 解释 它 。 本 节 将 给 
你 一 个 更 好 的 主意 ， 告 诉 你 如 何 向 用 户 、 客 户 、 非 技术 团队 成 员 或 你 的 妈妈 (她 很 好 奇 ， 
想 知 道 你 每 天 在 工作 中 都 做 些 什么 ) 解释 响应 式 设计 。 


总 的 来 说 ， 响 应 式 设计 是 一 种 方法 ， 使 网 站 可 以 在 任何 类 型 的 设备 和 任何 尺寸 的 屏幕 上 
(从 最 小 的 手机 直至 最 宽 的 桌面 显示 器 ) 轻松 浏览 和 使 用 。 


最 简单 的 解释 方式 是 比较 响应 式 网 站 与 非 响应 式 网 站 ， 并 看 看 这 两 种 类 型 的 网 站 在 智能 手 
机 上 的 浏览 效果 。 
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宽度 (比如 960 个 像素 ) 来 显示 的 站 点 。 你 将 看 到 整个 网 站 就 如 同 它 在 你 的 桌面 显示 器 上 
显 




















现 的 一 样 ， 但 它 最 初 以 一 个 微小 的 尺寸 进行 显示 ， 以 适应 屏幕 。 你 频繁 地 放大 和 缩小 
它 ， 以 便 阅 读 文字 和 浏览 网 站 ， 如 图 1-1 所 示 。 这 需要 许多 额外 的 操作 。 
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1-1: 在 手机 上 浏览 一 个 固定 宽度 的 网 站 时 ， 需 要 放大 文本 才能 看 清 





有 些 网 站 有 一 个 移动 版 站 点 ， 独 立 于 常规 的 桌 国 








网站。 在 你 的 智能 和 手机 上 浏览 此 类 网 站 








时 ， 它 以 全 尺寸 显示 (不必 进行 缩放 )， 但 你 时 常会 发 现 它 与 你 在 桌面 显示 器 上 浏览 的 同 
一 网 站 有 很 大 不 同一 一 通常 缺失 很 多 内 容 ， 网 站 拥有 者 因此 可 以 减少 维护 多 个 版 本 网 站 所 


产生 的 额外 工作 。 




















此 外 移动 版 网 站 通常 是 为 一 个 特定 尺寸 的 设备 〈 如 iPhone) 制作 的 ， 因 此 如 果 你 有 一 个 不 





同 的 设备 ， 该 网 站 可 能 就 无 法 很 好 地 适应 屏幕 了 。 














单独 的 移动 网 站 通常 是 为 某 一 大 小 的 设备 所 优化 的 ， 但 是 市 场 上 有 很 多 不 同 的 设备 ， 构 建 





























一 个 只 能 工作 于 一 种 设备 上 的 移动 网 站 可 能 意味 着 抛弃 了 所 有 使 用 其 他 不 同 设备 的 用 户 。 


举 一 个 例子 ， 宜 家 (KEA) 有 一 个 单独 的 移动 网 站 ， 是 为 某 一 尺寸 的 手机 优化 适 配 的 。 在 
1-2 中 ， 上 方 是 宜家 桌面 站 点 的 导航 栏 ， 左 下 方 是 该 站 点 在 iPad 中 的 样子 ， 右 下 方 是 该 




















站 点 在 iPhone 中 的 样子 。 


























图 1-2: 宜家 桌面 站 点 (上 方 ) 与 你 在 iPad 上 (左下 ) 所 看 到 的 是 一 样 的 ， 而 iPhone 则 显示 一 个 
特别 的 移动 网 站 〈 右 下 ) 








三 个 屏幕 截图 都 是 按 比例 缩小 的 ， 你 可 以 比较 在 不 同 尺寸 屏幕 上 所 看 到 的 内 容 。 在 iPhone 
上 浏览 的 是 移动 版 网 站 ， 只 显示 几 个 导航 链接 ， 但 它们 与 桌面 网 站 上 的 链接 有 相似 的 尺寸 
大 小 。 而 在 iPad 上 ， 你 剖 览 的 是 桌面 网 站 而 不 是 移动 版 网 站 ， 所 有 内 容 都 被 缩 得 非常 小 以 
适应 小 屏幕 。 你 必须 做 许多 缩放 操作 来 浏览 该 网 站 。 














宜家 公司 做 了 大 量 工作 来 创建 一 个 良好 的 移动 网 站 ， 但 如 果 你 的 设备 是 一 台 平板 电脑 ， 你 
没 法 使 用 它 ， 也 不 会 歼 得 满意 的 体验 。 如 果 宜 家 有 一 个 响应 式 网 站 ， 就 能 够 保证 人 们 使 用 
任何 尺寸 的 设备 都 能 获得 一 个 合适 的 界面 。 








采用 响应 式 设计 时 ， 网 站 仅 有 一 个 版 本 ， 因 此 你 能 浏览 全部 的 内 容 ， 且 网 站 会 自己 重新 排 
列 以 完美 地 适 配 任何 尺寸 的 屏幕 ， 并 具有 全 尺寸 文本 ， 那 样 你 就 无 需 进 行 缩 放 操作 了 ， 如 
图 1-3 所 示 。 
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图 1-9: 在 手机 、 平 板 及 桌面 显示 器 上 浏览 一 个 响应 式 网 站 
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DEPENDING ON CLEAN WATER 


LEARN MORE ABOUT FIVE SPECIES THAT RELY ON FRESHWATER 





& 1-3 (X) 
这 里 有 很 多 技术 细节 〈 稍 后 我 们 将 讨论 ) ， 但 从 用 户 的 角度 来 说 ， 描 述 一 个 响应 式 网 站 的 
关键 是 网 页 内 容 可 以 自动 改变 大 小 和 移动 位 置 以 适 配 显 示 它 们 的 屏幕 。 


1.2 HE 
在 学 习 响 应 式 设计 是 如 何 产生 的 之 前 ， 了 解 一 点 网 页 设计 的 历史 是 有 帮助 的 。 














1.2.1 固定 宽度 设计 

几 年 以 前 ， 网 站 是 被 设计 成 固定 宽度 的 ， 以 便 很 好 地 适 配 最 常见 尺寸 的 台式 机 和 笔记 本 的 
屏幕 。 在 2000 年 ， 这 意味 着 设计 的 屏幕 宽度 是 800 像素 (一 个 像素 是 屏幕 上 一 个 彩色 发 
光 的 小 点 ) ， 到 2005 年 前 后 ， 大 多 数 显 示 器 是 1024 像素 宽 。 


尽管 大 多 数 显 示 器 通常 就 是 那 几 种 固定 的 尺寸 ， 但 市 场 上 还 存在 一 些 更 宽 的 显示 器 ， 也 有 
些 老式 的 罕 屏 显示 器 仍 在 使 用 。 网 页 设计 师 希 望 他 们 的 设计 在 所 有 显示 器 上 看 起 来 都 完全 
相同 ， 所 以 他 们 通常 会 设计 一 个 固定 宽度 的 网 站 以 适应 最 常见 的 显示 器 尺寸 ， 如 960 像素 
宽 的 网 站 在 1024 像素 宽 的 屏幕 上 无 疑 是 适合 的 。 在 更 大 的 屏幕 上 ， 网 站 则 会 简单 地 以 空 
区 域 (设计 术语 为 空白 ) 来 填充 两 边 的 额外 空间 ， 如 图 1-4 所 示 。 
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图 1-4. 固定 宽度 的 MSN 站 点 在 任何 尺寸 的 屏幕 上 都 是 相同 的 宽度 ， 当 屏幕 比 站 点 宽 时 两 边 会 留 出 
日 


这 种 固定 宽度 的 设计 如 今 仍 是 相当 普遍 的 。 


H4 





流动 设计 (fluid design) 和 流 式 布 局 (liquid layout) 的 想法 在 21 世纪 初 吸引 了 不 少 注意 
力 。 这 些 技术 所 采用 的 基于 百分比 的 宽度 使 得 设计 的 网 页 能 以 流 式 方 式 适应 屏幕 的 宽度 。 
因此 它 可 以 充分 利用 大 屏幕 的 可 用 空间 。 尽 管 这 在 理论 上 听 起 来 不 错 ， 但 这 种 放弃 对 宽度 
控制 的 设计 最 终 意味 着 ， 在 宽屏 幕 上 网 站 将 变 得 超级 宽 而 且 栏目 分 得 非常 开 ， 这 令 大 多 数 
Web 设计 师 仍 然 坚 持 使 用 更 容易 处 理 的 固定 宽度 的 设计 。 








1.2.2 ”移动 Web 浏 览 


手机 首次 能 访问 因特网 是 在 20 世纪 90 年 代 中 期 ， 它 们 通常 并 不 具备 显示 实际 网 站 的 能 
力 ， 而 只 能 显示 文本 数据 ， 比 如 天 气 预报 、 股 票 报 告 和 比赛 得 分 。 最 初 的 移动 浏览 器 只 能 
显示 基本 的 HTML 格式 ， 且 通常 是 黑白 而 不 是 彩色 。 直 到 2005 年 左右 ， 在 更 先进 的 称 为 
智能 手机 的 设备 上 (比如 图 1-5 中 所 示 的 iPhone) ， 移 动 浏览 器 才能 够 显示 使 用 了 CSS2 和 
JavaScript 技术 的 “真正 的 ”网 页 。 
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1-5; iPhone 4S 





2007 年 发 布 的 iPhone 改变 了 游戏 规则 。 它 有 一 个 漂亮 的 界面 ， 可 以 利用 当时 所 有 的 Web 
技术 显示 网 页 ， 如 它们 在 全 尺寸 显示 器 上 所 显示 的 一 样 。 


虽然 触 屏 设备 已 经 存在 多 年 ， 但 iPhone 是 第 一 个 采用 多 点 触 控 技术 的 移动 设备 ， 能 同时 识 
别 屏幕 上 的 多 个 触 点 一 一 这 对 我 们 现在 习以为常 的 诸如 捏合 以 缩放 等 浏览 行为 来 说 是 必 不 
可 少 的 。 

















所 有 这 一 切 令 iPhone 不 断 被 评 为 那 一 年 最 具 革 命 性 的 产品 之 一 ， 但 仍 有 一 个 问题 存在 。 网 
页 是 设计 来 在 全 尺寸 显示 器 上 而 不 是 在 小 手机 上 浏览 的 ， 因 此 几乎 所 有 网 页 都 是 960 像素 
或 者 更 宽 。 另 一 方面 ，iPhone 的 屏幕 只 有 320 像素 宽 。 芋 果 的 解决 方案 是 自动 收缩 网 页 以 
适应 屏幕 的 浏览 区 域 ( 视 口 )， 然 后 允许 用 户 通 过 双击 或 捏合 手势 缩放 页 面 的 任何 区 域 。 


但 一 次 只 能 浏览 页 面 的 一 小 块 无 法 产生 好 的 用 户 体验 。 


网 页 设计 师 知 道 ， 这 对 于 使 用 网 络 的 人 们 来 说 不 是 一 个 最 佳 方 式 ， 他 们 需要 找到 一 种 方法 
使 得 网 页 能 更 容易 地 在 iPhone 的 小 屏幕 上 浏览 。 


1.2.3 ”移动 网 站 
因为 设计 师 习 惯 于 制作 固定 宽度 的 网 页 ， 所 以 最 简单 明了 的 解决 方案 是 制作 单独 的 移动 版 
网 站 (具有 一 个 国定 的 页 面 宽度 ， 适 配 320 像素 宽 的 屏幕 ， 而 不 是 常见 的 1024 像素 宽 的 
显示 器 ) ， 如 图 1-6 所 示 。 
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图 1-6: 华盛顿 邮 报 网 站 的 桌面 版 和 手机 版 


如 果 用 户 使 用 的 是 手机 ， 通 常会 被 自动 重 定向 到 移动 版 网 站 。 否 则 ， 可 以 通过 点 击 一 个 链 
接 来 选择 去 移动 版 网 站 ， 或 者 通过 一 个 不 同 的 URL 访问 移动 版 网 站 ， 通 常 使 用 m 子 域名 
(比如 http:/m.sprintcom)。 这 种 做 法 使 得 这 些 单独 的 移动 版 网 站 被 称 为 m-dot 网 站 。 


当然 ， 这 对 Web 团队 意味 着 额外 的 工作 ， 但 他 们 通常 会 简化 这 项 工作 ， 把 移动 版 网 站 做 成 
标准 网 站 的 精简 版 : 只 具有 一 小 部 分 内 容 ， 如 图 1-6 所 示 。 
他 们 的 理由 是 : 手机 只 是 在 “四 处 奔走 ”或 某 些 基 本 活动 中 才 使 用 。 这 在 当时 对 大 多 数 用 
户 来 说 可 能 是 对 的 。 但 随 着 手机 越 来 越 普及 ， 人 们 开始 使 用 这 些 设备 来 执行 越 来 越 多 的 任 
务 ， 而 他 们 之 前 仅 在 台式 机 或 笔记 本 电脑 上 执行 这 些 任 务 。 


1.2.4 更 多 的 设备 


做 一 个 “iPhone 网 站 ”， 他 们 如 是 说 。 起 初 ， 在 iPhone 是 智能 手机 市 场 仅 有 的 霸主 玩家 时 ， 
这 种 方式 很 好 。 但 没 多 久 ， 其 他 手机 公司 很 快 紧 跟 滑 流 ， 推 出 它们 的 产品 以 应 对 iPhone, 





但 这 些 新 的 智能 手机 并 非 都 拥有 相同 的 尺寸 。 相 对 于 iPhone 的 320 像素 宽度 ， 许 多 拥有 更 
窄 的 屏幕 (240 像素 或 更 少 )， 另 一 些 则 拥有 比 iPhone 更 宽 的 屏幕 (特别 是 那些 被 设计 成 水 
平 握 持 而 不 是 垂直 握 持 的 设备 ) 。320 像素 宽 的 iPhone 版 网 站 并 不 能 很 好 地 适应 那些 屏幕 。 




















因此 网 页 设计 师 开始 尝试 寻找 一 种 解决 方案 : 我 们 怎么 制作 一 个 网 站 ， 使 其 能 用 于 所 有 尺 
寸 的 屏幕 ? 这 没有 简单 的 答案 。 
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到 了 2010 年 ， 苹 果 发 布 了 iPad， 再 一 次 改变 了 游戏 规则 。 移 动 版 网 站 太 小 ， 不 能 充分 利 
H iPad 更 大 的 屏幕 空间 ， 但 桌面 尺寸 固定 宽度 的 网 站 对 于 以 纵向 模式 浏览 的 iPad 来 说 又 
显得 太 大 了 。 


尽管 有 些 设计 师 的 反应 是 创建 单独 的 Pad 网 站 (现在 他 们 已 经 有 三 个 独立 的 网 站 了 )， 但 
大 多 数 人 意识 到 ， 随 着 越 来 越 多 的 各 色 尺 寸 的 设备 上 市 ， 为 每 一 种 可 能 的 屏幕 尺寸 创建 单 
独 的 网 站 不 再 是 一 项 可 持续 下 去 的 工作 。 


1.2.5 ”媒体 查询 
网 页 设计 社区 重 拾 流 式 布 局 的 理念 ， 使 用 基于 百分比 的 宽度 ， 并 设法 让 其 成 为 一 种 适用 于 
小 型 移动 设备 的 解决 方案 。 



































«nd 

















使 用 百分比 而 不 是 像素 使 得 网 页 及 页 面 各 部 分 都 能 够 自动 改变 宽度 来 适应 任意 屏幕 尺寸 ， 
因此 也 就 很 容易 地 消除 了 相似 尺寸 设备 之 间 的 差异 。 

但 是 一 旦 你 纵 观 所 有 的 设备 ， 就 会 有 这 样 一 个 问题 。 如 果 要 缩 窗 三 栏 的 布局 以 应 用 于 智能 
手机 的 屏幕 宽度 ， 那 么 各 栏 中 的 文本 会 变 得 窒 而 长 ， 难 以 阅读 。 同 样 ， 单 栏 布局 在 智能 手 
机 屏幕 上 看 起 来 是 蛮 好 的 ， 但 要 想 在 桌面 显示 器 上 轻松 阅读 则 显得 大 宽 了 。 

本 质 上 ， 这 个 问题 是 : 不 创建 多 个 单独 的 站 点 ， 如 何 使 一 个 网 站 能 够 在 罕 屏 上 以 单 栏 显 
示 ， 而 在 大 屏 上 以 多 栏 显 示 ? 如 何 根 据 浏 览 网 站 的 设备 的 特性 来 要 求 浏览 器 变换 网 页 的 布 
局 ? 


媒体 查询 登场 。 



























































CSS 的 @media 规则 允许 你 根据 设备 特性 而 显示 不 同 的 CSS 样式 ， 这 实际 上 在 十 多 年 前 
的 CSS2 中 就 有 了 ， 但 当时 它 只 支持 查询 媒体 的 类 型 ， 比 如 屏幕 (screen) 或 打印 (print), 
这 通常 只 能 用 于 为 网 站 设计 创建 一 个 打印 版 〈 可 能 包含 的 变化 也 仅仅 是 去 除 背 景色 ， 以 免 
浪费 打印 机 墨水 ) 。 


直到 CSS3 对 媒体 查询 制定 了 规范 ( 即 关于 某 事 必须 怎样 做 的 一 个 正式 详尽 的 描述 )， 才 能 
够 基于 媒体 (设备 ) 的 宽度 、 高 度 和 色彩 性 能 等 特性 执行 更 精确 的 查询 。 媒 体 查 询 不 影响 
HTML (页 面 之 下 的 实际 内 容 和 结构 )， 只 影响 使 用 CSS 后 应 用 到 页 面 的 样式 。 浏 览 器 在 
2009 年 前 后 开始 支持 CSS3 媒体 查询 。 


媒体 查询 可 以 做 什么 呢 ? 


举 个 基本 的 例子 ,假设 我 们 有 一 个 网 站 ， 有 两 块 各 自 独立 的 内 容 。 我 们 可 以 创建 一 个 很 适 
合 智能 手机 的 单 栏 设计 ， 以 垂直 堆 受 的 方式 显示 两 块 内 容 。 而 在 更 宽 的 屏幕 上 ， 我 们 可 能 
想 要 以 并 排 的 两 栏 来 显示 这 两 块 内 容 。 
































10 | 第 1 章 


使 用 媒体 查询 ， 我 们 可 以 询问 设备 屏幕 有 多 宽 ， 然 后 告诉 浏览 器 仅 在 屏幕 具有 足够 宽度 
时 ， 才 以 两 栏 来 显示 内 容 。 


要 用 代码 来 实现 这 种 效果 ， 我 们 在 开始 只 是 用 CSS 将 内 容 显示 在 一 栏 中 ， 然 后 再 添加 一 条 
CSS 媒体 查询 ， 询 问 屏 幕 宽度 是 否 大 于 等 于 40 em (你 将 在 第 4 章 中 了 解 em，40 em 的 宽 
度 略 罕 于 一 台 常 见 的 平板 电脑 ， 但 你 可 以 在 媒体 查询 中 指定 任 一 宽度 )。 


之 后 我 们 会 在 这 条 媒体 查询 中 添加 CSS 样式 将 内 容 显示 在 两 栏 中 。 浏 览 器 仅 在 该 媒体 查询 


结果 为 真 时 ( 即 如 果 屏 幕 宽 度 大 于 等 于 40 em) 才 使 用 此 CSS 样式 。 如 果 屏 幕 宽度 小 于 40 
em， 它 会 忽略 此 CSS 样式 ， 内 容 保持 在 一 栏 中 。 














因此 ， 我 们 可 以 针对 不 同 的 屏幕 尺寸 使 网 站 变换 为 不 同 的 布局 ， 而 无 需 创 建 单独 的 网 站 。 





通过 使 用 媒体 查询 ， 我 们 可 以 随心 所 欲 地 改变 网 站 的 样式 ， 不 仅仅 是 栏 数 。 媒 体 查 询 可 以 
移动 内 容 ， 改 变 文 字 的 大 小 ， 隐 藏 或 显示 内 容 块 ， 调 整 边 距 和 空白 ， 以 及 调整 其 他 的 CSS 
样式 。 


[小 贴 士 ] 

在 这 一 节 中 ， 我 提 到 了 询问 设备 屏幕 宽度 的 媒体 查询 。 实 际 上 ， 在 响应 式 设 计 中 常见 的 媒体 
查询 是 询问 设备 的 视 口 宽度 ,而 不 是 屏幕 宽度 。 视 口 是 屏 幕 上 (浏览 器 窗口 中 ) 显示 网 站 
的 区 域 。 

在 台式 电脑 上 ， 你 可 以 改变 浏览 器 窗口 的 大 小 ， 因 此 ， 窗 口 并 不 总 是 屏幕 的 最 大 宽度 。 媒 体 
查询 会 检测 浏览 器 窗口 内 的 空间 ， 所 以 如 果 你 改变 了 浏览 器 窗口 的 大 小 ， 你 的 视 口 也 会 发 生 
变化 。 在 移动 设备 上 ， 你 无 法 改变 窗口 的 大 小 ， 所 以 屏幕 和 视 口 总 是 相同 的 宽度 。 

尽管 正确 的 术语 应 该 是 视 口 宽度 ， 但 你 仍 会 经 常 听 到 人 们 在 谈论 媒体 查询 和 响应 式 设计 时 
说 到 屏幕 宽度 。 从 技术 上 讲 他 们 说 得 并 不 正确 ， 他 们 很 可 能 指 的 是 视 口 宽度 (正如 我 在 本 书 
中 所 做 的 ， 除 非 我 明确 指出 )。 

还 有 其 他 的 媒体 查询 ， 可 以 检测 设备 屏幕 的 实际 宽度 而 不 是 视 口 宽度 ， 但 在 目前 它们 并 不 
m 

mH. 


12.6 ”灵活 性 
媒体 查询 可 以 重 排 你 的 页 面 布局 ， 但 如 果 没 有 灵活 性 做 基础 ， 响 应 式 设计 将 无 法 工作 。 
首先 ， 在 你 的 站 点 中 几乎 每 一 种 水 平 度量 都 需要 采用 灵活 的 单位 ， 而 不 是 僵化 的 像素 。 这 


意味 着 各 栏 的 宽度 和 其 他 布局 元 素 将 以 百分比 定义 ， 文 本 则 以 一 个 叫 作 em 的 相对 单位 来 
定义 。 
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缩放 页 面 上 的 图 像 这 一 工作 有 点 不 同 ， 因 为 你 不 一 定 想 让 它们 按照 屏幕 的 宽度 来 改变 大 
小 ， 而 是 希望 只 要 屏幕 上 有 空间 ， 图 像 就 可 以 显示 得 足够 大 以 便 看 清 细节 。 可 问题 是 ， 依 
据 设备 屏幕 的 大 小 ， 并 不 总 是 有 足够 的 空间 来 以 全 尺寸 显示 一 个 图 像 。 你 需要 确保 图 像 在 
没有 足够 空间 的 情况 下 不 会 被 截断 。 在 第 6 章 中 ， 我 们 将 学 习 一 个 CSS 技巧 来 确保 图 像 总 
是 能 够 与 我 们 放置 它 的 空间 相 适 应 。 















































1.2.7. ”响应 式 网 页 设计 

这 些 思 想 (媒体 查询 或 灵活 性 ) 本 身 都 不 是 新 的 或 开创 性 的 思想 。 但 在 2010 年 ， 网 页 设 
计 师 Ethan Marcotte 琢磨 出 来 一 套 组 合 使 用 这 些 概念 来 制作 网 站 的 方法 ， 能 够 自动 对 不 同 
的 屏幕 尺寸 做 出 响应 。 














Marcotte 创造 了 “响应 式 网 页 设计 ”这 个 术语 ， 并 于 2010 年 在 一 篇 为 4 List Apart 撰写 的 
文章 ( http://alistapart.com/article/responsive-web-design) 中 首次 提 及 ， 随 后 在 2011 年 其 所 
写 的 Responsive Web Design 一 书 得 到 出 版 (http://www.abookapart.com/products/responsive- 




















web-design‘). 


13 为 什么 是 响应 式 设计 
响应 式 网 页 设计 的 概念 自首 次 提出 以 来 一 直 备 受热 议 。 就 像 任 何 新 技术 思想 一 样 ， 有 些 人 


接受 它 ， 另 一 些 人 则 唾弃 它 。 


1.3.1 每 个 设备 都 得 到 正确 的 设计 
使 用 响应 式 设计 最 有 说 服 力 的 理由 是 ， 你 创建 的 网 站 不 仅 在 现今 市 场 上 的 各 种 设备 上 都 能 
正确 地 工作 并 有 良好 的 显示 效果 ， 而 且 很 可 能 在 将 来 出 现 的 那些 新 设备 上 也 能 如 此 。 









































此 外 ， 使 用 响应 式 设计 ， 你 不 会 冒 用 户 可 能 在 桌面 显示 器 上 浏览 移动 版 站 点 的 风险 ， 反 之 
亦 然 。 





如 果 你 有 多 个 独立 的 站 点 ， 那 这 无 疑 会 成 为 一 个 问题 ,无论 你 是 通过 设备 检测 来 发 送 正 确 
版 本 的 站 点 给 每 个 设备 ， 还 是 使 用 一 组 单独 的 URL. (比如 一 个 m-dot 子 域名 ) 供 移动 版 网 
站 使 用 。 


如 果 网 站 有 一 个 单独 的 移动 版 本 ， 通 常会 使 用 设备 检测 (其 发 生 在 网 站 服务 器 ， 且 在 页 面 
显示 之 前 ) 来 确定 应 该 将 哪个 版 本 的 网 页 (移动 版 或 桌面 版 ) 发 送 给 任 一 特定 的 设备 。 这 
样 ， 站 点 中 的 每 个 页 面 虽然 只 有 一 个 URL， 但 实际 上 存在 两 个 不 同 版 本 的 HTML 页 面 。 
然而 ， 以 上 这 一 过 程 并 不 是 完全 可 靠 ， 有 了 时 会 发 送 错误 的 页 面 版 本 。 此 外 ， 设 备 的 检测 过 
程 也 会 增加 页 面 的 加 载 时 间 。 




























































































注 1: 中 文 版 参见 人 民 邮 电 出 版 社 的 《移动 优先 与 响应 式 Web 设计 》。 
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为 单独 的 移动 版 站 点 〈 即 m-dot 站 点 ) 使 用 不 同 的 URL 是 比较 容易 实现 的 ， 但 是 这 要 求 用 
户 访 问 的 是 正确 的 网 站 版 本 。 对 于 通过 社交 媒体 或 电子 邮件 在 用 户 之 间 来 回 传递 的 链接 ， 











获得 一 个 正确 版 本 的 页 面 通常 会 给 用 户 增加 额外 的 负担 ， 或 者 有 时 他 们 根本 没 法 选择 。 


例如 ， 如 果 一 个 桌面 用 户 将 《纽约 时 报 》 网 站 上 的 一 个 链接 通过 电子 邮件 发 给 一 个 手机 用 
户 ， 手 机 用 户 访问 该 链接 时 ， 显 示 出 来 的 页 面 会 在 屏幕 的 上 方 显示 一 条 信息 ， 告 诉 他 可 以 
切换 到 网 站 的 移动 版 ， 如 图 1-7 所 示 。 这 看 上 去 不 错 ， 但 用 户 需 要 执行 额外 的 操作 ， 花 费 
额外 的 时 间 来 点 击 并 加 载 一 个 完全 不 同 的 页 面 。 




















图 1-7: 在 手机 上 访问 桌面 版 《纽约 时 报 》 网 站 的 一 个 链接 ， 显 示 的 是 桌面 版 站 点 并 包含 一 条 可 切换 


至 移动 版 的 提示 消息 


另 一 方面 ， 如 果 我 用 手机 访问 《纽约 时 报 》 的 移动 版 网 站 ， 并 发 送 一 篇 文章 的 链接 给 某 


人 ， 他 在 台式 电脑 上 打开 链接 时 


， 看 到 的 将 是 为 移动 设备 优化 的 移动 版 页 面 (如 图 1-8 所 














示 )， 页 面 中 没有 清晰 明确 的 方式 告 之 应 该 如 何 打 开 完 整 的 桌面 版 站 点 。 用 户 可 以 读 这 篇 
文章 ， 但 他 必须 通过 点 击 来 查看 
的 大 量 补充 链接 和 推荐 文章 。 














图 像 的 全 尺寸 版 本 ， 而 且 他 无 法 看 到 存在 于 桌面 版 网 站 中 
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图 1-8: 点 击 《纽约 时 报 》 手 机 版 上 的 链接 将 进入 手机 版 的 页 面 ， 即 使 你 使 用 的 是 台式 电脑 
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对 于 响应 式 设计 ， 你 的 网 页 只 有 一 个 版 本 ， 所 以 你 永远 不 会 遇 上 “错误 的 版 本 ”这 个 问 
题 。 无 论 在 什么 设备 上 浏览 该 网 站 ， 都 能 得 到 正确 的 显示 。 


1.3.2 更 少 的 工作 
使 用 响应 式 设 计 最 明显 的 优势 是 ， 无 论 是 网 站 、 设 计 、 代 码 还 是 内 容 ， 你 都 只 需要 创建 一 
份 。 


如 果 你 的 网 站 有 一 个 单独 的 手机 版 站 点 ， 你 需要 创建 和 维护 两 套 (或 更 多 ) 完全 独立 的 
HTML 页 面 。 任 何 改动 都 需要 对 每 一 个 站 点 进行 同步 修改 ， 即 便 你 试图 让 它们 保持 一 致 ， 
也 几乎 肯定 会 出 问题 ， 某 些 事物 最 终 将 变 得 不 再 匹配 。 尽 管 使 用 内 容 管理 系统 (CMS) 或 
模板 系统 可 使 这 项 工作 变 得 容易 些 ， 但 还 是 有 更 多 的 代码 和 内 容 要 维护 ， 更 多 的 事情 可 能 


会 被 弄 乱 。 

对 于 响应 式 网 站 ， 你 只 有 一 套 内 容 ， 无 论 屏幕 大 小 总 能 恰当 地 显示 。 未 来 的 设计 调整 也 能 
够 通过 更 改 样式 表 来 达成 。 

对 于 那些 没有 响应 式 设计 经 验 的 人 ， 起 初创 建 一 个 响应 式 网 站 (你 学 会 了 一 切 如 何 工作 ) 
可 能 比 创建 一 个 固定 宽度 的 网 站 要 付出 更 多 的 努力 ,但 从 长 远 来 看 ， 你 在 网 站 以 后 的 维护 
工作 中 将 更 轻松 。 


1.3.3 ”搜索 优化 


一 个 单独 的 手机 网 站 具有 一 组 独立 的 URL， 这 会 影响 你 的 网 站 在 搜索 结果 中 的 排名 。 















































如 果 你 有 两 个 不 同 版 本 的 页 面 ， 它 们 具有 相同 或 相似 的 内 容 ， 但 URL 不 同 例如，http:// 
www.example.com 和 http://m.example.com)， 则 搜索 引擎 需要 知道 它们 是 被 当 作 同 一 个 页 
面 ， 从 而 使 得 该 页 面 可 以 被 正确 索引 并 在 搜索 结果 列表 中 显示 为 一 个 条 目 。 


虽然 这 可 以 通过 使 用 JavaScript 或 服务 器 端 代码 来 实现 ， 却 显得 有 点 复杂 ， 并 且 如 果 你 做 
得 不 正确 ， 最 终 可 能 导致 两 个 版 本 的 页 面 都 出 现在 搜索 结果 中 ， 从 而 给 用 户 造 成 困惑 ， 还 
可 能 对 你 的 搜索 排名 造成 负面 影响 。 


谷歌 自 2012 年 以 来 开始 推荐 将 响应 式 设 计 用 于 为 智能 手机 优化 的 网 站 ， 不 仅 因为 它 能 创 
建 一 个 更 好 的 用 户 体验 ， 还 因为 它 允 许 谷 歌 的 网 站 热 虫 更 有 效 地 检索 你 的 内 容 ， 这 意味 着 
对 网 站 所 做 的 改变 将 会 更 快 地 在 搜索 结果 中 得 到 更 新 。 


必 应 推荐 网 站 使 用 必要 的 方法 来 确保 仅 产 生 一 组 URL， 但 没有 明确 推荐 使 用 响应 式 设计 来 
做 到 这 一 点 。 




































































14 ”总结 








在 引入 响应 式 设 计 之 前 ， 网 站 通常 都 是 固定 宽度 的 ， 这 意味 着 网 站 的 设计 无 论 在 多 大 的 屏 


幕 上 都 是 以 相同 的 宽度 显示 。 在 智能 手机 出 现 后 ， 这 就 真 的 行 不 通 了 ， 因 为 网 站 在 小 屏幕 








上 显得 很 小 ,用户 必须 不 断 地 进行 缩放 来 阅读 内 容 。 





移动 网 站 紧 接 着 出 现 了 ， 许 多 公司 独立 于 它们 的 主 站 点 (或 称 为 桌面 站 点 ) 创建 了 第 二 个 








网 站 。 移 动 网 站 通常 只 包含 主 网 站 上 的 一 小 部 分 内 容 和 功能 ， 所 以 手机 用 户 对 其 并 不 感 


H. 








随 着 越 来 越 多 的 设备 出 现 ， 设 计 师 们 很 快意 识 到 创建 多 个 网 站 以 适应 每 一 种 不 同 尺 寸 的 屏 
幕 ， 即 使 不 是 不 可 能 的 ， 也 是 不 切实 际 的 。 响 应 式 设计 的 概念 被 引入 ， 它 使 得 网 站 能 够 响 











应 设备 的 宽度 ， 并 以 一 种 适合 于 屏幕 尺寸 的 方式 来 显示 网 站 的 内 容 。 





响应 式 网 页 设计 包含 两 个 主要 部 分 ， 灵 活性 ， 也 就 是 说 水 平 度量 需要 使 用 相对 单位 ， 比 如 
百分比 ， 这 样 它们 才能 对 不 同 尺 寸 的 屏幕 做 出 响应 ， 媒 体 查询 ， 其 允许 你 基于 设备 的 屏幕 











宽度 ， 用 CSS 来 改变 网 站 的 设计 。 


响应 式 设计 允许 你 只 用 一 套 代 码 就 能 为 任意 屏幕 尺寸 的 设备 提供 一 个 合适 的 设计 。 不 必 维 
护 多 套 不 同 的 代码 意味 着 更 少 的 工作 。 同 时 ， 应 用 响应 式 设计 意味 着 你 的 网 站 是 为 搜索 引 





擎 优化 了 的 。 


接 下 来 ， 我 们 将 在 第 2 章 中 介绍 内 容 的 重要 性 ， 以 及 如 何 确保 设计 出 在 响应 式 网 站 上 有 良 


好 显示 效果 的 内 容 。 
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第 2 章 


啊 应 式 内 容 





如 果 你 认为 HTML 和 CSS 是 一 个 网 站 最 重要 的 部 分 ， 那 我 们 需要 从 另 一 个 角度 来 看 待 这 
个 问题 。 用 户 访问 你 的 网 站 是 为 了 获取 内 容 (及 功能 )， 而 不 是 为 了 欣赏 设计 师 的 才华 或 
开发 者 的 编程 技术 。 


用 户 不 会 在 乎 你 的 网 站 是 否 是 响应 式 的 ， 而 且 他 们 中 的 大 多 数 人 可 能 连 “响应 式 网 页 设 
计 ” 是 什么 意思 都 不 知道 。 他 们 不 会 考虑 自己 是 否 使 用 了 适当 的 设备 来 访问 网 站 ,或 者 他 
们 的 屏幕 尺寸 是 否 合适 。 他 们 其 至 通常 都 不 关心 网 站 是 什么 样子 的 ， 只 要 能 用 他 们 自己 的 
设备 轻松 获得 所 需 的 信息 或 功能 就 行 。 

这 就 是 为 什么 在 设计 网 站 时 我 们 要 首先 考虑 内 容 。 

与 此 相反 ， 如 有 果 你 先 设计 ， 然 后 再 填充 内 容 ， 那 你 的 内 容 将 永远 限于 次 要 状态 ， 你 也 不 太 
可 能 为 用 户 提供 他 们 需要 的 内 容 。 


因此 ， 对 于 响应 式 网 站 ， 你 首先 需要 考虑 的 是 内 容 ， 以 确保 内 容 在 小 屏幕 上 有 展 好 的 显 
示 效 果 。 如 果 你 使 用 固定 宽度 网 站 中 的 现 有 内 容 ， 将 很 难 将 其 硬 塞 进 较 小 的 屏幕 布局 中 。 
如 果 你 从 零 开 始 创建 新 内 容 ， 则 需要 确保 它 是 为 所 有 屏幕 尺寸 优化 的 ， 而 不 只 是 一 种 屏 
幕 尺寸 。 


2.1 内 容 策略 


“内 容 策略 ”(content strategy) 一 词 在 过 去 的 几 年 里 获得 了 极 大 的 关注 ， 特 别 是 在 2009 年 
Kristina Halvorson 的 著作 Content Strategy for the Web (New Riders) 出 版 之 后 。 
























































在 那 之 前 ， 罕 有 公司 谈 及 自己 网 站 的 内 容 策略 。 只 有 当 需 要 创建 内 容 去 填充 网 站 上 的 待 填 
充 区 域 时 ， 我 们 才 会 讨论 网 站 内 容 。 





确实 ， 通常 我 们 在 创建 网 站 时 完全 没有 考虑 内 容 策 略 。 如 果 我 们 的 公司 或 项 目 需 要 一 个 网 
站 ， 我 们 会 首先 设计 一 个 很 漂亮 并 且 与 品牌 相 匹配 的 网 站 ， 接 下 来 列 出 所 有 现 有 的 将 要 放 
到 网 站 上 的 东西 (内容 )， 然 后 试 着 将 它们 都 塞 到 新 设计 的 网 站 中 去 。 


如 有 果 幸 和 运 的 话 ， 我 们 能 有 一 个 信息 架构 师 ， 他 构建 了 一 个 良好 的 架构 来 组 织 我 们 的 所 有 内 
容 。 否 则 ， 就 是 所 有 的 内 容 都 堆砌 在 那里 。 无 论 我 们 有 什么 内 容 ， 都 让 它们 在 网 站 上 的 某 
个 地 方 呈现 出 来 。 毕 竞 ， 从 技术 的 角度 来 看 ， 只 要 花费 非常 少 的 成 本 就 能 把 网 站 做 得 更 大 
(拥有 更 多 的 内 容 和 页 面 )， 那 么 何不 把 所 有 内 容 都 放 到 网 站 上 ， 让 人 们 在 需要 的 时 候 可 以 
随时 获取 ， 直 到 永远 呢 ? 




















但 后 来 我 们 突然 意识 到 网 站 的 内 容 很 重要 。 











内 容 策略 指 的 是 规划 和 管理 内 容 的 一 种 方法 。 这 些 内 容 不 仅 包 括 文 本 ， 也 包括 其 他 形式 的 
信息 ， 如 图 像 、 视 频 和 音频 。 内 容 策略 不 仅 限于 网 站 上 有 什么 ， 还 关系 到 网 站 如 何 运作 。 














首先 要 从 大 局 着 眼 。 网 站 应 该 实现 什么 样 的 目标 ? 用 户 访问 网 站 时 ， 你 希望 他 们 做 什么 ? 
什么 是 成 功 的 用 户 交 互 ? 如 何 用 网 站 来 支持 你 的 商业 目标 或 项 目 目标 ? 如 何 满足 用 户 需 
求 ? 


























制定 一 套 内 容 策 略 要 花费 时 间 和 精力 ， 但 如 果 你 是 在 进行 视觉 设计 之 前 而 不 是 之 后 考虑 内 
容 ， 那 么 你 创建 的 网 站 会 更 好 。 


要 获得 有 关内 容 策 略 的 更 多 信息 ， 请 查阅 以 下 资源 : 





e Content Strategy for the Web, Second Edition, Kristina Halvorson 与 Melissa Rach 合 3, 
由 New Riders 出 版 (http://contentstrategy.com/) ; 

e “Content Strategy for Mobile", Karen McGrane 发 表 于 4 Book Apart (http://www.abookapart. 
com/products/content-strategy-for-mobile) ; 

e “Content Strategy Within the Design Process" , Brad Shorr 发 表 于 Smashing Magazine (http:// 


uxdesign.smashingmagazine.com/201 1/12/02/content-strategy-within-design-process/) 。 


[ 小 贴 士 ] 
如 果 你 不 知道 “内 容 策 略 ”“ 内 容 营 销 ”“ 内 容 管 理 ” 之 间 的 区 别 ， 也 不 太 了 解 所 有 其 他 与 内 
容 相 关 的 术语 ? 可 以 看 看 Melissa Rach 发 表 在 UX Magazine 上 的 文章 “Content Strategy and 


Its Cousins" ( http://uxmag.com/articles/content-strategy-and-its-cousins )。 
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移动 内 容 策略 
近来 ， 由 于 每 个 人 都 在 关注 如 何 创建 适用 于 移动 设备 的 网 站 ,“ 移 动 内 容 策略 ”这 个 词 也 
开始 流行 起 来 。 内 容 策 略 无 疑 是 重要 的 ， 所 以 移动 内 容 策略 肯定 是 超级 重要 的 ， 对 吧 ? 


并 非 如 此 。 


记 住 ， 移 动 和 非 移 动 设 备 之 间 不 再 有 严格 的 界线 。 正 如 你 到 目前 为 止 在 本 书 中 所 学 的 那 
样 ， 我 们 的 目标 是 创建 能 够 在 所 有 设备 上 工作 的 网 站 ， 当 然 也 包括 移动 设备 。 


所 以 你 不 需要 一 个 额外 的 移动 内 容 策略 。 实 际 上 ， 移 动 内 容 策略 通常 与 常规 的 网 站 内 容 策 
略 无 异 ， 只 是 你 不 能 再 忽略 移动 设备 了 。 


你 要 制定 的 依然 是 可 靠 的 内 容 策略 ， 但 请 记 住 ， 用 户 将 会 使 用 各 种 设备 在 不 同 的 场景 下 访 
问 你 的 网 站 ， 所 以 你 在 制定 内 容 策 略 时 一 定 要 考虑 到 这 一 点 。 


要 使 创建 的 内 容 在 移动 设备 上 和 桌面 电脑 上 呈现 出 同样 好 的 效果 ， 你 会 遇 到 很 多 从 未 想 过 
的 新 挑战 。 务 必 现 在 就 开始 考虑 。 


2.2 内容 整 理 


设计 一 个 响应 式 网 站 时 ， 你 可 能 一 开始 就 有 很 多 六 在 的 内 容 ， 可 能 是 你 旧 网 站 上 的 内 容 ， 
线 下 的 内 容 或 者 只 是 关于 网 站 应 该 提供 什么 内 容 的 一 些 想法 。 


你 需要 做 的 第 一 件 事 就 是 思考 如 何 处 理 这 些 内 容 。 













































































2.2.4 仅 使 用 你 需要 的 

首先 ， 你 真正 需要 的 内 容 要 远 远 少 于 你 自 以 为 需要 的 。 

千 万 不 要 觉得 你 应 该 把 所 有 的 内 容 都 放 到 网 站 上 ， 以 防 有 人 人 需要。 当然， 如 今 在 线 存储 的 
价格 相当 便宜 ， 我 们 认为 它 几 乎 是 免费 的 ， 但 是 把 所 有 内 容 都 放置 在 网 站 上 还 是 有 明确 成 
本 的 。 


首先 是 用 户 的 成 本 。 网 站 上 的 内 容 越 多 ， 用 户 在 得 到 所 要 的 内 容 之 前 需要 翻 找 的 内 容 也 就 
更 多 。 

当然 ， 有 可 能 他 碰巧 在 你 的 网 站 上 又 发 现 了 一 些 感 兴趣 的 内 容 ， 但 更 多 时 候 不 是 这 样 。 难 
道 会 有 人 需要 去 看 贵 公司 过 去 十 年 发 布 的 所 有 新 闻 稿 吗 ? 


网 站 上 多 余 的 页 面 将 使 导航 和 搜索 结果 变 得 混乱 。 页 面 上 多 余 的 内 容 将 迫使 用 户 做 更 多 的 
滚动 操作 。 不 必要 的 东西 越 多 ， 用 户 找到 其 所 需 就 越 难 ， 放 弃 查 找 的 可 能 性 也 就 越 大 。 





















































其 次 是 网 站 所 有 者 的 成 本 。 他 需要 投入 更 多 的 资源 来 跟踪 、 组 织 和 重新 组 织 、 不 断 更 新 现 
有 内 容 ， 以 及 持续 地 检查 链接 是 否 失效 。 你 网 站 上 的 内 容 越 多 ， 某 些 内 容 过 时 或 不 正确 的 
的 可 能 性 就 越 大 ， 如 有 果 你 给 出 了 错误 的 信息 ， 将 要 承担 痪 在 的 责任 。 你 不 能 将 内 容 添加 到 
网 站 上 就 置之不理 ， 而 是 需要 一 直 维 护 。 





精简 内 容 的 最 佳 时 机 是 在 设计 新 网 站 之 前 ， 或 是 重新 设计 现 有 网 站 之 前 。 内 容 越 少 ， 设 计 
过 程 就 越 容易 ， 构 建 网 站 时 所 需 做 的 工作 也 越 少 。 





2.2.2 ”如 何 精 简 
当 决 定 要 保留 什么 内 容 时 ， 你 需要 从 你 的 商业 目标 和 用 户 需 求 两 方面 考虑 。 


例如 ,“ 在 网 站 上 发 布 我 们 所 有 的 新 闻 稿 ”不 是 一 个 商业 目标 。 相 反 ， 目 标 应 该 像 这 样 : 
“确保 媒体 联系 人 可 以 得 到 撰写 有 关 我 们 业务 的 文章 所 需 的 信息 。” 


或 许 你 在 网 站 首页 放置 了 10 篇 最 新 新 闻 稿 的 链接 ， 因 为 你 为 自己 的 成 就 感到 自豪 。 但 那 
会 过 多 占用 宝贵 的 首页 版 面 。 你 的 绝 大 多 数 用 户 不 是 新 闻 界 的 从 业 人 员 ， 剩 下 的 人 也 没 兴 
趣 阅读 你 公司 的 新 闻 稿 。 将 新 闻 稿 放 到 一 个 专用 的 媒体 页 既 可 以 确保 媒体 人 士 仍 能 找到 它 
们 《他 们 知道 如 何 查找 该 页 面 )， 同 时 你 也 不 会 强迫 其 他 人 去 看 他 们 永远 不 会 点 击 的 链接 。 
如 果 你 真 的 想 分 享 最 近 的 成 就 ， 那 就 写成 另 一 种 风格 呈献 给 普通 读者 : 在 介绍 中 使 用 简短 
直 白 的 语言 ， 而 不 是 商业 辞 令 。 















































同时 还 要 考虑 每 个 单独 内 容 块 的 长 度 。 如 果 “ 关 于 我 们 ”页 有 1000 字 ， 那 你 说 的 就 太 多 
了 。 它 没 必要 是 一 篇 见长 乏味 的 公司 成 长 故事 (其 至 包括 了 过 去 30 年 每 一 个 董事 会 成 员 
的 名 字 )。 大 多 数 用 户 进入 该 页 面 想 要 知道 的 ， 非 常 简单 ， 就 是 你 的 网 站 或 公司 是 做 什么 
的 。 如 果 这 些 信息 不 能 用 一 两 句 话说 清楚 ， 用 户 恐 怕 不 会 做 进一步 的 阅读 。 如 果 你 必须 列 
出 所 有 董事 会 成 员 ， 请 把 它们 放 在 一 个 单独 的 页 面 中 。 


别 忘 了 留意 多 余 的 内 容 。 即 使 你 的 CMS 能 很 方便 地 把 内 容 布置 于 多 个 地 方 ， 但 除非 真 的 
必要 ， 否 则 不 要 这 样 做 。 它 不 仅 占 用 网 站 的 空间 ， 还 会 干扰 用 户 。 这 还 意味 着 同样 的 内 容 
将 会 在 搜索 引擎 中 出 现 多 次 ， 这 会 让 用 户 感到 困惑 ， 如 果 搜 索引 擎 视 这 些 页 面 为 重复 的 内 
容 的 话 ， 也 降低 你 的 搜索 排名 。 


在 本 书后 面 的 部 分 ， 我 们 将 讨论 小 屏幕 优先 的 设计 方法 ， 让 你 先 设 计 一 个 用 于 小 屏幕 设备 
的 布局 ， 然 后 再 转 而 为 更 宽屏 幕 的 设备 设计 布局 。 这 样 的 设计 方式 真 的 非常 有 助 于 你 精简 
内 容 。 当 你 想 在 小 屏幕 布局 中 填充 内 容 时 ， 它 迫使 你 考虑 什么 内 容 是 真正 重要 的 ， 并 给 你 
一 个 清楚 的 答案 ， 而 这 在 你 首先 为 桌面 尺寸 的 网 站 设计 内 容 时 是 很 难得 到 的 。 
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2.2.83 ”内容 审计 
当 重 新 设计 现 有 网 站 时 ， 最 好 先 做 一 下 内 容 审计 ， 也 就 是 把 你 目前 拥有 的 所 有 内 容 做 一 下 
盘点 、 列 出 一 个 清单。 如 果 是 一 个 大 型 网 站 ， 结 果 可 能 会 让 你 大 吃 一 惊 。 




















通过 查阅 清单 你 可 以 决定 哪些 内 容 需 要 保留 ， 哪 些 内 容 可 以 舍 去 ， 哪 些 新 内 容 需 要 创建 ， 
以 及 谁 来 负责 内 容 的 创作 与 编辑 。 


一 旦 你 在 清单 中 列 出 了 所 有 的 事项 ， 就 能 很 容易 地 找到 并 决定 如 何 处 理 它们 。 


清单 不 需要 事 无 巨细 ， 但 至 少 应 该 进行 分 类 ， 同 时 也 要 包含 主要 的 内 容 。 如 果 是 一 个 新 网 
站 ， 你 应 该 给 出 这 样 一 个 清单 ， 它 不 仅 有 网 站 上 所 计划 要 包含 的 内 容 ， 也 有 内 容 开 发 的 时 
间 进 度 表 。 

若 想 了 解 更 多 关于 内 容 审查 的 知识 ， 可 阅读 Donna Spencer 发 表 在 UXmastery 上 的 文章 


“How to Conduct a Content Audit" (http://uxmastery.com/how-to-conduct-a-content-audit/) 。 


2.3 内 容 编写 


一 旦 你 弄 清楚 了 需要 哪些 内 容 以 及 把 它们 放 在 哪里 ， 还 需要 考虑 如 何 具体 编写 内 容 。 










































































2.3.1 用 户 如 何 阅读 
你 可 曾 想 过 用 户 是 如 何在 一 个 网 站 上 陪读 的 ? 我 们 喜欢 设想 他 们 会 访问 网 站 上 的 每 一 个 页 
看 并 将 它们 从 头 读 到 尾 ， 可 实际 上 并 非 如 此 。 














“ 建 好 了 ， 他 们 就 会 来 ”可 不 是 Web 内 容 创 作者 的 座右铭 ， 至 少 不 应 该 是 。 不 过 你 很 可 能 
被 这 样 的 网 站 轧 弄 过 ， 这 种 网 站 中 充满 了 元 长 的 新 闻 稿 、 自 我 推销 的 公司 信息 ， 以 及 几乎 
没什么 用 、 根 本 就 没 人 阅读 的 内 容 。 


即使 你 认为 你 的 产品 /想法 /项 目 是 世界 上 最 棒 的 ， 也 不 意味 着 有 人 愿意 读 长 篇 大 论 来 了 
解 它 ， 甚 至 那些 通过 访问 你 的 网 站 已 表现 出 一 些 兴 趣 的 人 们 也 不 会 。 











用 户 浏 览 你 的 网 站 是 为 了 找到 他 们 想 要 的 信息 。 你 要 确保 没有 任何 事物 阻碍 他 们 。 

1. 浏览 

用 户 是 以 浏览 的 方式 阅读 网 页 的 。 即 使 网 站 的 内 容 非 常 棒 ， 用 户 对 它 的 关注 也 不 可 能 如 网 
站 拥有 者 那样 密切 。 


他 们 走马 观 花 式 地 浏览 内 容 ， 这 看 一 上 腿 ， 那 且 一 下 。 他 们 只 会 粗略 地 阅读 页 面 ， 眼 睛 在 链 
接 、 标 题 、 图 像 和 小 块 文本 上 短暂 地 停留 。 





数 百 万 的 网 页 在 与 你 争夺 用 户 的 关注 ， 所 以 不 要 浪费 用 户 的 时 间 ， 要 让 他 们 尽 可 能 容易 地 
获取 所 需 信息 Eno 


2. 倒 金 字 塔 
使 用 户 能 以 最 快 的 速度 获取 所 需 信息 的 关键 之 一 ， 是 使 用 一 种 新 闻 学 上 称 为 “ 倒 金 字 
(interved pyramid) 的 编写 方式 。 




















回 退 到 报纸 还 是 印刷 在 真实 的 纸张 上 而 不 是 在 网 站 上 发 行 的 时 候 ， 编 辑 每 天 不 得 不 面 对 的 
问题 是 如 何 规划 物理 版 面 的 大 小 。 他 们 必须 生产 出 确切 数量 的 内 容 来 填充 版 面 ， 不 能 多 也 
不 能 少 。 但 在 新 闻 还 没有 发 生 之 前 ， 想 要 提前 计划 出 新 闻 所 需 的 版 面 几 乎 是 不 可 能 的 。 


所 以 当 记 者 为 报纸 撰写 文章 时 ， 他 们 有 确切 的 字数 限制 ， 并且 也 明白 ， 如 果 有 更 重要 的 新 
闻 发 生 ， 他 们 可 能 必须 缩短 故事 以 腾 出 版 面 。 


为 了 使 这 样 的 过 程 更 容易 ， 记 者 将 他 们 故事 最 重要 的 细 市 放 在 头 几 段 ， 并 在 随后 的 段落 
中 包含 那些 相对 不 太 重 要 的 细节 以 及 背景 信息 。 这 样 ， 如 采编 辑 需要 缩短 故事 以 减 小 占 
用 的 版 面 ， 就 可 以 砍 掉 结尾 的 那些 段落 而 不 会 于 类 重点 。 图 2-1 能 让 你 更 好 地 理解 这 种 
工作 方式 。 


最 重要 的 内 容 
























































图 2-1: 使 用 倒 金 字 塔 方式 ， 确 保 用 户 看 到 最 重要 的 那 部 分 内 容 


撰写 用 于 网 站 的 内 容 时 ， 你 也 可 以 使 用 相同 的 办 法 ， 不 是 因为 编辑 会 截断 你 的 故事 结尾 ， 
而 是 用 户 可 能 会 这 么 做 ， 他 们 不 会 从 头 读 到 尾 。 确 保 最 重要 的 细节 首先 出 现 ， 然 后 是 用 户 
可 能 看 也 可 能 不 看 的 次 要 细 市 。 


3. 分 级 标题 
如 果 你 的 页 面 内 容 超 过 两 三 个 段落 那么 长 ， 把 它 分 割 成 小 块 对 大 家 肯定 都 是 有 好 处 的 。 


对 用 户 而 言 ， 使 用 分 级 标题 的 好 处 有 : 


。 在 开始 阅读 之 前 ， 更 容易 地 了 解 页 面 结构 ， 更 好 地 认 知 页 面 内 容 的 类 型 ， 
。 可 以 向 前 跳 转 到 感 兴趣 的 部 分 ， 
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。 使 用 辅助 技术 的 用 户 (比如 使 用 屏幕 阅读 器 软件 的 盲人 用 户 ) 可 以 在 页 面 内 容 中 导航 而 
不 必 通 读 所 有 内 容 ， 
。 可 以 在 滚动 时 更 容易 地 找到 自己 所 在 的 位 置 。 


对 网 站 所 有 者 而 言 ， 使 用 分 级 标题 的 好 处 有 : 


。 让 搜索 引擎 知道 页 面 的 关键 主题 是 什么 ， 进 而 能 够 提升 页 面 的 搜索 引擎 排 位 ， 
。 内 容 作 者 能 够 创作 出 更 适合 Web 的 内 容 。 


要 写 出 好 的 标题 ， 首 先 应 将 你 的 内 容 根据 不 同 的 重点 分 割 成 多 个 部 分 。 















































标题 应 该 尽 可 能 短 并 且 表 明 重 点 ， 还 应 包含 相关 的 关键 词 。 理 想 情 况 下 ， 每 个 标题 应 该 以 
关键 字 开 头 ， 以 使 略 读 更 容易 。 











标题 应 该 是 接 下 来 内 容 的 一 个 描述 性 预览 ， 同 时 不 应 故弄玄虚 。 


4. 简短 明了 
用 户 在 浏览 页 面 的 时 候 ， 倾 向 于 阅读 小 段 的 文字 内 容 。 大 块 的 文字 会 让 用 户 望 而 生 旦 ， 通 
常 不 再 继续 阅读 下 去 。 








段落 应 该 简短 ， 一 般 不 超过 100 字 。 


如 果 内 容 更 适合 按 要 点 列 出 ， 那 就 应 该 使 用 列表 。 对 于 同样 的 内 容 ， 列 表 形 式 要 比 段 落 形 
式 更 易于 查看 和 理解 。 





2.3.2 ”简明 的 语言 
你 在 内 容 中 所 使 用 的 语句 十 分 重要 ， 它 不 仅 商 定 了 你 的 内 容 基 调 ， 也 决定 了 用 户 是 否 能 够 
理解 内 容 。 


根据 研究 ， 如 美国 国家 教育 统计 中 心 (NCES) 资助 的 “2003 年 全 国 成 人 读 写 能 力 评估 ” 
(NAAL，http://nces.ed.gov/NAAL/)， 美 国 成 年 人 的 平均 阅读 水 平 通 常 在 八 九 年 级 水 平 ， 近 
50% 的 成 年 人 的 阅读 能 力 在 六 年 级 水 平 以 下 。 



































我 们 这 些 为 网 站 撰写 和 编辑 内 容 的 人 通常 受过 良好 的 教育 ， 而 我 们 的 阅读 水 平 往 往 也 反映 
出 这 一 点 。 但 要 记 住 我 们 的 读者 并 不 是 我 们 自己 。 

很 容易 做 出 这 样 错误 的 假设 : 你 的 网 站 的 用 户 肯 定 比 其 他 人 更 聪明 或 受 教育 程度 更 高 。 毕 
竞 ， 他 们 是 够 明智 地 选择 了 你 的 网 站 ， 不 是 吗 ? 但 如 果 没 有 浅显 易 懂 的 语言 ， 你 将 失去 湾 
在 客户 或 是 遗漏 了 向 人 们 传递 信息 一 一 他 们 很 可 能 真 的 需要 这 些 信息 。 


近年 来 ， 涌 现 了 一 场 简明 语言 (plain language) 运动 ， 内 容 作者 努力 创作 容易 理解 的 内 容 ， 
并 以 一 种 使 用 户 更 易于 找到 其 所 需 内 容 的 逻辑 结构 来 编排 它们 。 
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使 用 简明 语言 的 一 个 附带 好 处 是 ， 它 真 的 有 助 于 所 有 用 户 。 大 多 数 人 都 想 要 迅速 地 得 到 他 
们 想 要 的 信息 ， 别 忘 了 ， 有 整个 互联 网 的 信息 等 着 他 们 去 读 。 即 使 对 于 文化 程度 高 的 用 
户 ， 简 明 的 语言 也 将 帮助 他 们 更 快 地 阅读 和 导航 内 容 。 

你 也 能 帮助 英语 不 是 母语 的 用 户 。 这 并 不 仅仅 是 指 那些 外 来 移民 ， 也 指 想 要 光顾 你 的 餐厅 
的 外 国 游 客 ， 或 者 想 要 订购 你 的 产品 的 他 国 居 民 。 如 果 你 的 网 站 提供 了 信息 ， 有 兴趣 阅读 
的 可 能 不 仅仅 是 你 自己 国家 的 居民 。 





























对 于 使 用 简明 语言 ， 一 个 好 的 开始 是 用 尽 可 能 简单 的 词语 ， 尽 可 能 短 的 句子 和 段落 。 通 过 
像 前 面 所 谈 的 那样 精 减 你 的 内 容 ， 确 保 低 文化 程度 的 用 户 不 必 花 费 很 多 额外 的 时 间 来 吃力 
地 阅读 与 他 们 无 关 的 内 容 。 


以 下 资源 可 以 帮助 你 了 解 简明 语言 








。 “The Center for Plain Language's Plain Language Checklist” (http://centerforplainlanguage. 
org/5-steps-to-plain-language/) ; 

e "Lower-Literacy Users: Writing for a Broad Consumer Audience", Jakob Nielsen 3&, 2005 
年 3 H 14 HEAT. Nielsen Norman Group 网 站 (http://www.nngroup.com/articles/writing- 
for-lower-literacy-users/) ; 

e "United States Federal Plain Language Guidelines" (http://www.plainlanguage.gov/howto/ 
guidelines/FederalPLGuidelines/TOC.cfm) A 


24 内容 平等 


在 思考 自己 对 用 户 了 解 多 少 的 时 候 ， 你 需要 考虑 的 第 一 件 事 是 ， 你 所 “知道 ”的 有 关 他 们 
的 大 多 数 事情 都 是 基于 假设 ， 不 一 定 正确 。 


一 个 常见 的 错误 是 基于 用 户 所 使 用 的 设备 去 假定 用 户 需要 或 不 需要 某 些 内 容 。 

例如 ， 经 常设 想 手机 用 户 是 “在 移动 中 "， 因 此 他 们 只 需要 基于 位 置 的 信息 ， 比 如 要 去 的 
餐厅 的 地 址 ， 或 者 他 们 的 航班 是 否 准 时 。 

但 是 现在 手机 已 经 变 得 无 处 不 在 ， 我 们 几乎 在 任何 地 方 都 使 用 它们 ， 即 使 我 们 旁边 就 有 笔 
记 本 电脑 或 台式 机 。 
手机 现在 就 像 是 另 一 台电 脑 ， 人 们 期 望 无 论 是 在 手机 上 还 是 在 台式 机 或 笔记 本 上 浏览 网 
站 ， 都 能 获得 同样 多 的 信息 。 

每 个 人 都 应 能 访问 网 站 的 所 有 内 容 ， 不 管 他 们 正在 使 用 什么 设备 。 这 一 概念 称 为 “内 容 平 


等 ”(context parity). 
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响应 式 设 计 的 优点 之 一 ， 就 是 我 们 可 以 为 所 有 用 户 提供 相同 的 内 容 而 不 用 顾虑 他 们 所 使 用 
的 设备 ， 与 此 同时 ， 我 们 提供 的 内 容 又 为 用 户 所 使 用 的 设备 进行 了 优化 。 














正如 你 将 在 第 5 章 中 学 到 的 ， 要 针对 不 同 设备 的 屏幕 尺寸 呈现 不 同 的 内 容 ， 你 有 很 多 事 可 
以 做 。 


25 ”内容 管理 
如 果 你 的 网 站 有 内 容 (所 有 网 站 都 有 内 容 ) ， 你 需要 制订 一 个 内 容 管理 (content governance) 
计划 。 这 意味 着 一 旦 内 容 在 你 的 网 站 上 发 布 ， 你 就 要 妥善 管理 它们 。 


你 不 能 发 布 完 内 容 就 将 其 抛 诸 脑 后 ， 否 则 会 出 现 信息 过 时 或 者 不 正确 、 链 接 失 效 等 问题 。 
在 网 站 上 发 布 内 容 之 前 ， 你 需要 为 内 容 管 理 制订 一 个 良好 的 计划 ， 否 则 你 可 能 永远 不 会 再 
有 时 间 去 做 这 件 事 。 


创建 长 期 有 效 的 内 容 


要 使 你 的 内 容 更 易于 维护 ， 你 能 做 的 一 件 事 就 是 使 其 尽 可 能 不 受 时 间 的 影响 。 


当然 ， 不 是 所 有 的 内 容 都 是 永恒 的 ， 做 好 这 件 事 的 一 个 方法 是 审视 内 容 并 想象 你 在 一 年 以 
后 又 碰巧 遇 到 它 。 那 时 它 还 能 不 能 独立 存在 ? 

尽 可 能 在 日 期 中 包含 年 份 。 你 可 曾 有 过 这 样 的 经 历 : 你 昕 说 了 一 个 年 度 盛事 ， 想 要 参加 ， 
于 是 到 网 站 上 查看 ， 结 果 看 到 上 面 醒目 地 写 着 盛事 于 10 月 15 日 举行 ， 可 你 却 不 知道 这 指 
的 是 今年 即将 举行 的 活动 ， 还 是 去 年 已 举办 过 的 活动 ? 

如 果 你 知道 信息 仅 在 特定 时 间 内 是 有 效 的 ， 应 该 在 内 容 中 做 个 标注 。 这 样 如 果 你 忘记 回 过 
头 去 修改 或 删除 ， 至 少 看 到 它 的 人 会 知道 内 容 已 经 失效 。 


2.6 ”有 自 适 应 内 容 


作为 响应 式 网 站 ， 网 站 中 的 内 容 不 仅 要 能 在 不 同 宽度 的 屏幕 中 浏览 ， 还 应 该 能 在 不 同 的 场 


景 中 完整 地 浏览 。 
















































































例如 ， 图 2-2 是 Rachel Nabors 发 表 在 4 List Apart 上 的 一 篇 文章 在 桌面 浏览 器 中 的 显示 


效果 。 
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Web Animation at Work 


by RACHEL NABORS . February 11, 2014 
Published in Graphic Design, Interaction Design - 9 Comments 


When I left my job last April, the plan was that I'd use my fancy C883 animation tricks to 
land a front-end development position at an agency in New York. But as I spoke at more 
and more conferences and interviewed at more and more companies, I realized I would 


图 2-2. 在 桌面 显示 器 上 浏览 A List Apart 上 的 一 篇 文章 








但 有 些 人 喜欢 用 RSS 阅读 器 阅读 帖子 和 文章 。 阅 读 器 会 剥 除 网 站 的 所 有 设计 ， 只 依靠 
HTML 来 显示 内 容 ， 如 图 2-3 所 示 。 























[part - 
AUYTYTCYCYW UY NEN Web Animation at Work 


QÈ A List Apart - 2/11/14 7:59 AM Posted hy Rachel Nabors 


When | left my job last April, the plan was that I'd use my fancy CSS3 animation tricks to land a 
front-end development position at an agency in New York. But as | spoke at more and more 
conferences and interviewed at more and morc companies, I rcalized | would never be satisfied 
working as a traditional front-end developer. | am nat excited by Angular.js. I don't want to be 
the gatekeeper to another massive repository of stylesheets. | don't stay up all night building 
Sass extensions. (Well, except for the one I built to help calculate keyframe CSS animations.) 


Only one area of development truly thrilled me: interaction. Canvas, SVG, the web audio API, 
wcbCGL—CSS3 animations were just the beginning of my fascination. | started to sec the browser 
as something more than a document reader, the internet as more than a series of linked 


documents. 


We use HTML to tell stories and communicate vast amounts of information—and animation helps 

us do both better. Just as hierarchy guides users through content, animation guides them 

through interactions by helping them understand relationships, structure, cause, and effect. 
Imation at Work 11Feb 2014 Animation shouldn't be a nice-to-have. It is critical to communication. 


Another layer of information 





Animation is powerful because it can create the "illusion of life." This means taking Into account 


图 2-3. 在 RSS 阅读 器 中 查看 一 篇 文章 





人 们 也 常常 使 用 Instapaper (http//www.instapaper.com/) 之 类 的 服务 ， 用 它们 查看 网 页 的 
主要 内 容 (广告 或 导航 之 类 的 东西 通通 没有 ) ， 或 者 保存 文章 以 便 稍 后 阅读 。 图 2-4 显示 的 
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是 台式 电脑 上 的 浏览 效果 ， 图 2-5 显示 的 是 iPhone 上 的 浏览 效果 。 
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When I left my job last April, the plan was that I'd use my fancy CSS3 animation 
tricks to land a front-end development position at an agency in New York. But as I 
spoke at more and more conferences and interviewed at more and more 

companies, I realized 1 would never be satisfied working as a traditional front-end 


图 2-4, 在 台式 电脑 上 查看 Instapaper 中 的 一 篇 文章 
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Web Animation at Work 


by Rachel Nabors February 11, 2014 Published 
in Graphic Design, Interaction Design « 


When I left my job last April, the plan was 
that I'd use my fancy CSS3 animation tricks 
to land a front-end development position at 
an agency in New York. But as I spoke at 


«eO Q AA Ô 
& 2-5; 在 iPhone 上 查看 Instapaper 中 的 一 篇 文章 


我 们 不 能 再 仅仅 考虑 如 何在 网 站 上 显示 内 容 。 我 们 需要 把 它 看 作 一 系列 的 数据 块 ， 比 如 标 
题 、 作 者 姓名 和 主体 内 容 。 这 些 不 同 的 数据 块 称 为 元 数据 (metadata)， 意 思 就 是 “关于 数 


如 果 你 使 用 CMS， 那 你 可 能 一 直 是 这 么 做 的 ， 用 单独 的 字段 对 应 标题 、 文 章 日 期 和 作者 姓 
名 。 在 响应 式 设计 中 ， 我 们 依据 屏幕 尺寸 来 调整 布局 。 在 小 屏幕 上 ， 标 题 、 日 期 、 作 者 和 
主体 文本 可 能 会 一 个 接 一 个 地 垂直 显示 。 在 大 屏幕 上 ， 日 期 和 作者 则 可 能 是 在 另外 一 个 文 























本 框 中 显示 。 这 些 布局 的 变化 仅 在 内 容 被 分 割 成 单独 的 数据 块 时 才 有 可 能 实现 。 
如 果 文 章 重 现 于 另 一 个 应 用 中 ， 数 据 块 也 使 得 内 容 能 以 一 种 合理 的 方式 显示 。 




















那 如 何 处 理 其 他 类 型 的 内 容 呢 ? 例如 ， 在 一 个 电子 商务 网 站 中 ， 不 能 只 用 一 个 描述 字段 来 
包含 销售 商品 的 所 有 细节 ， 而 应 使 用 单独 的 字段 分 别 描述 颜色 、 尺 寸 、 材 质 、 使 用 类 别 
等 。 这 样 ， 你 不 仅 可 以 根据 屏幕 宽度 轻松 地 更 改 页 面 布局 ， 还 可 以 实现 更 强大 的 搜索 和 导 
航 功 能 ， 让 用 户 更 快 地 找到 所 需 的 商品 。 




















通过 结构 化 内 容 并 附加 元 数据 ， 你 不 仅 能 使 内 容 更 好 地 适应 不 同 的 屏幕 尺寸 ， 还 能 使 内 容 
更 易于 显示 在 网 站 之 外 的 地 方 。 








2.7 Wi 


不 入 之前， 网 站 内 容 仍 被 视 为 在 设计 之 后 再 添加 的 东西 ， 但 近年 来 内 容 策 略 已 显得 愈 发 重 
要 。 


在 设计 之 前 就 开始 考虑 内 容 将 帮助 你 创建 一 个 符合 商业 目标 和 用 户 需 求 的 网 站 。 


在 向 新 站 点 转移 的 过 程 中 要 整理 你 的 网 站 内 容 ， 首 先 通 过 内 容 审计 来 查看 你 拥有 的 内 容 ， 
然后 进行 梳理 和 精 减 ， 只 使 用 网 站 真正 需要 的 内 容 。 不 必要 的 内 容 只 会 使 用 户 难 以 使 用 网 
站 ,使 网 站 所 有 者 难以 维护 网 站 。 

确保 内 容 简 洁 ， 并 以 简明 的 语言 编写 ， 这 样 易于 用 户 阅读 。 用 户 是 以 浏览 的 方式 阅读 网 页 
的 ， 所 以 要 创建 短 的 段落 并 用 分 级 标题 将 内 容 分 成 多 个 部 分 。 确 保 最 重要 的 信息 放 在 页 面 
开头 ， 因 为 有 时 用 户 不 会 从 头 读 到 尾 。 
不 要 基于 用 户 访问 网 站 所 用 的 设备 来 对 其 所 需 的 内 容 做 出 假设 。 所 有 来 到 你 的 网 站 的 用 户 
都 应 该 能 访问 全 部 的 内 容 。 

除了 添加 内 容 到 新 设计 的 网 站 之 外 ， 还 要 考虑 在 网 站 上 线 后 如 何 管 理 内 容 。 要 制订 更 新 内 
容 的 计划 。 尽 可 能 创建 不 受 时 间 影 响 、 长 期 有 效 的 内 容 。 

将 内 容 分 块 使 之 可 在 页 面 上 重 排 ， 也 很 容易 移植 到 其 他 媒体 上 。 


在 下 一 章 ， 我 们 将 开始 学 习 响 应 式 网 站 背后 的 代码 细节 。 





m 
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第 二 部 分 





创建 啊 应 式 网 站 


第 3 章 


响应 式 网 站 之 HTML 








创建 一 个 响应 式 网 站 ， 你 要 用 到 HTML 和 CSS， 偶 尔 也 会 用 上 一 点 儿 JavaScript。 





即使 你 的 工作 并 不 涉及 为 网 站 创建 代码 ， 也 应 该 知道 一 点 儿 发 生 在 响应 式 网 站 “底层 ”的 
事情 ， 所 以 请 不 要 跳 过 接 下 来 的 儿童 。 








本 章 假设 你 至 少 对 HTML 有 一 些 基 本 的 了 解 。 如 果 你 不 是 程序 员 ， 那 么 不 必 完 全 精确 地 理 
解 一 切 是 如 何 工作 的 ， 只 需 做 一 般 性 的 了 解 。 





即使 你 有 丰富 的 HTML 编码 经 验 ， 本 章 中 所 涉及 的 概念 可 能 仍 有 你 不 熟悉 的 ， 比 如 视 口 
(viewport) 属性 以 及 使 用 HTMLS5 中 新 的 结构 性 元 素来 创建 网 页 。 











对 于 其 他 概念 ， 如 文档 类 型 (doctype) 和 字符 集 (charset) ， 你 可 能 并 不 陌生 ， 但 在 这 里 
讲述 它们 ， 是 因为 它们 对 于 理解 如 何 正确 地 创建 一 个 响应 式 网 站 的 HTML 页 面 是 必需 的 。 























在 本 章 中 ， 我 们 也 会 讨论 一 下 HTML 的 版 本 ， 以 及 使 用 HIML5 创建 网 站 的 意义 。 然 后 ， 
我 们 将 使 用 HTMLS 的 结构 性 元 素 创 建 一 个 示例 网 页 。 


在 本 章 的 结尾 ， 我 们 会 讲 讲 如 何 写 出 好 的 代码 ， 包 括 使 用 语义 化 HTML、 分 离 内 容 和 表现 ， 
以 及 养 成 使 用 HTML 元 素 正 确 标记 内 容 的 良好 习惯 ， 这 能 让 所 有 用 户 更 易于 理解 它们 。 

















[ 小 贴 士 ] 
如 果 你 完全 不 懂 HTML, Mozilla 开发 者 网 络 中 的 “HTML 入 门 ”是 一 个 开始 学 习 它 的 好 地 
Z (https://developer.mozilla.org/en-US/docs/Web/Guide/HTMIU/Introduction )。 
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3.1 使 用 HTML 

HTML 不 是 一 成 不 变 的 : 它 随时 间 不 断 地 修订 以 适应 新 技术 的 发 展 并 加 入 新 的 特性 。HTML 
是 一 个 活 的 有 机 体 ， 它 会 随 着 时 间 改 变 自身 以 适应 其 背后 网 络 和 技术 需求 的 不 断 发 展 。 
每 隔 几 年 ， 就 会 有 一 个 HTML 新 版 本 发 布 。 在 本 书 出 版 之 时 ， 浏 览 器 仍 处 在 HTMLA 切换 
至 HTMLS 的 过 程 中 。 


本 书 中 的 例子 将 使 用 最 新 版 本 的 HIML5。 但 因为 HTMLS 还 处 在 一 个 发 展 的 过 程 中 ， 并 
非 所 有 的 HTMLS 新 元 素 现在 都 是 可 用 的 。 在 本 节 ， 你 将 了 解 HTML 版 本 是 如 何 制定 的 ， 
以 及 如 何 找 出 那些 可 以 在 网 站 中 安全 使 用 的 HTMLS 新 元 素 。 























3.1.1 HTML 版 本 


很 多 HTML 元 素 在 版 本 的 变更 中 保持 不 变 ， 所 以 每 次 新 的 HTML 版 本 出 来 后 你 并 不 需要 
从 头 开始 学 起 。 


打 一 个 容易 理解 的 比方 ， 如 果 你 阅读 莎士比亚 写 于 500 年 前 的 某 些 作品 。 它 们 是 用 英语 写 
的 ， 与 我 们 今天 讲 的 是 同一 种 语言 ， 但 又 有 些 不 同 。 在 莎士比亚 的 作品 中 ， 一 些 单词 在 今 
天 的 英语 中 已 经 不 再 使 用 。 其 他 一 些 仍 在 使 用 的 单词 ， 也 可 能 拼写 不 同 或 售 义 有 细微 差 
别 。 同 样 ， 如 果 莎 士 比 亚 突 然 军 越 到 现代 ， 有 很 多 单词 他 也 不 会 认识 。 



























































但 即使 有 这 些 差异 ， 它 仍然 是 同一 种 语言 ， 你 也 差不多 能 完全 理解 它 。 





在 比较 不 同 版 本 的 HTML 时 也 是 如 此 。HTML 由 元 素 (element) 组 成 ， 其 是 用 于 描述 网 
页 内 容 的 组 件 (component)。 例 如 ， 段 落 元 素 用 于 表示 有 段落， 图 像 元 素 用 于 向 网 页 中 添加 
图 像 。 


每 一 个 新 版 本 的 HTML 中 都 会 加 入 新 的 元 素 ， 茶 些 已 有 的 元 素 会 有 稍微 不 同 的 含义 ， 茶 些 
元 素 则 将 消失 不 见 。 比 如 ， 段 落 元 素 <P>, BH HTML 的 第 一 个 版 本 起 含义 一 直 未 变 ， 但 像 
«key» 元 素 则 已 经 不 存在 了 ， 画 布 元 素 «canvas» 是 最 近 才 添加 至 新 版 中 的 。 

















在 大 多 数 情 况 下 浏览 器 能 够 识别 任 一 版 本 的 HTML， 但 老 的 浏览 器 可 能 无 法 识别 某 些 新 元 
素 ， 所 以 你 需要 做 一 点 额外 的 工作 来 确保 它们 可 以 正常 地 显示 全 部 内 容 。 





与 人 类 语言 一 样 ，HTML 的 演变 也 经 历 了 一 段 时 间 ， 它 并 非 一 步 到 位 。 新 版 的 HTML 规范 
提交 后 ，Web 社区 会 花费 大 量 时 间 (以 年 计 ) 一 点 一 点 讨论 它 。 然 后 浏览 器 开始 一 点 一 点 实 
现 它 。 就 在 新 HTML 规范 中 的 一 部 分 已 先 被 浏览 器 实现 时 ， 剩 余部 分 仍 在 讨论 和 测试 中 。 


各 版 本 之 间 存 在 着 很 多 的 时 间 上 的 重合。 比如 HTMLS 的 制定 工作 始 于 2004 年 ， 最 终 的 规 
范 是 计划 于 2014 年 末 “ 完 成 ”( 现 在 它 还 只 是 一 个 “草案 ”)。 而 “完成 ”并 不 意味 着 改变 




















就 此 终结 ， 接 着 将 会 有 5.4. 52 这 样 具 有 较 小 变化 的 版 本 。 下 一 个 大 版 本 HTML6 也 已 经 
在 讨论 了 ， 而 老 版 本 的 HTML 仍 在 使 用 中 。 








除了 较 新 的 网 页 是 以 HTMLS 创建 的 外 ， 你 还 会 遇 到 大 量 以 HIML4 和 XHTML (出 现 于 
HTML4 和 HTMLS 之 间 ) 创建 的 网 站 。 





3.1.2 Web 标准 

万 维 网 联盟 (W3C, World Wide Web Consortium) 是 一 个 自愿 性 的 标准 化 组 织 ， 对 “ 
方 ” 版 本 的 HTML 具有 决定 权 。( 自 愿意 味 着 尽管 行业 已 同意 使 用 W3C 制定 的 规则 ， 但 
并 非 被 要 求 要 这 么 做 。) 

在 W3C 出 现 之 前 ， 浏 览 器 已 建立 起 自己 的 规则 来 解释 HIML。 因 此 ， 一 个 网 页 在 不 同 的 
浏览 器 上 的 表现 可 能 会 非常 的 不 同 ， 能 在 一 个 浏览 器 中 工作 的 HTML 代码 在 另 一 个 浏览 器 
中 甚至 可 能 不 被 识别 。 


m} 

















因为 W3C 是 自愿 性 质 的 ， 浏 览 器 实际 上 并 不 是 必须 要 遵守 它 的 规则 。 但 在 大 多 数 情 况 下 ， 
浏览 器 会 遵守 它们 ， 因 为 如 果 一 个 浏览 器 显示 的 网 页 效果 与 其 他 浏览 嚣 大相径庭 ， 那 不 会 
有 人 想 要 使 用 它 。 可 还 是 会 存在 茶 些 差异 ， 所 以 接 下 来 你 将 学 习 在 浏览 器 不 遵守 规则 的 情 
况 下 ， 需 要 在 代码 中 做 什么 才能 确保 网 页 被 正确 地 显示 。 








作为 网 页 设计 师 ， 我 们 需要 遵守 这 些 规 则 。 这 将 确保 我 们 的 网 站 能 够 在 不 同 的 浏览 器 和 设 
备 之 上 工作 。 遵 循 标 准 也 将 确保 你 的 网 站 是 未 来 友好 型 的 ， 更 有 可 能 与 将 来 出 现 的 新 设备 
及 新 技术 兼容 。 








3.1.3 使 用 HTML5 
当 人 们 谈 及 一 个 “HTML5 元 素 ” 时 ， 通 常 是 指 一 个 HTMLS 中 新 出 现 的 元 素 (也 就 是 说 ， 
不 是 HTMLA 中 的 元 素 ) 。 








如 果 一 个 元 素 是 新 加 入 到 HTMLS 中 的 ， 你 需要 了 解 浏览 器 是 否 已 经 支持 该 元 素 。 即 使 它 
们 被 支持 ， 你 也 要 知道 茶 些 用 户 的 电脑 上 仍 使 用 的 是 老式 浏览 器 ， 并 不 支持 某 些 新 元 素 。 





当 我 在 本 书 中 引用 新 的 HTMLS 元 素 时 ， 我 会 告 之 它们 目前 是 否 被 良好 支持 ， 以 及 你 需要 
怎么 做 才能 使 之 适应 老式 浏览 器 。 


正如 我 前 面 提 到 的 ， 大 部 分 HTML 元 素 在 各 个 版 本 中 是 保持 不 变 的 。 


HTMLS 中 有 超过 100 个 不 同 的 元 素 。 在 本 书 中 ， 我 们 只 学 习 那 些 你 可 能 会 用 到 的 元 素 。 
但 还 有 很 多 其 他 的 元 素 ， 如 果 你 遇 到 一 个 不 认识 的 HTML 元 素 ， 查 一 查 它 的 相关 资料 以 确 
定 它 的 作用 以 及 它 是 否 是 有 效 的 HTMLS 元 素 。 
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[ 小 贴 士 ] 
需要 一 份 所 有 版 本 HTML 元 素 的 完整 列表 ， 可 查看 Mozilla 开发 者 网 络 上 的 “ HTML 
element reference" ( https://developer.mozilla.org/en-US/docs/HTML/Element )。 


要 想 弄 清楚 哪些 新 元 素 是 被 哪些 浏览 器 支持 的 ， 参 考 Can Use 网 站 ( http;//www.caniuse.com )。 


3.2 页 面 基 本 结构 
从 头 创 建 一 个 网 页 所 要 做 的 第 一 件 事 是 以 基本 的 HTML 元 素来 构建 页 面 
3.2.1 文档 类 型 声明 


在 HTML 文件 开头 要 做 的 第 一 件 事 是 文档 类 型 声明 (doctype)。 文 档 类 型 声明 告诉 浏览 
器 ， 页 面 使 用 的 是 哪个 版 本 的 HTML, 











o 




















对 于 HTML5， 文 档 类 型 声明 是 : 





<!DOCTYPE html> 
如 果 你 现在 所 工作 的 网 站 使 用 的 旧版 本 的 HTML， 你 会 看 到 一 些 其 他 的 文档 类 型 声明 。 


即使 在 一 个 新 的 HTML 版 本 出 来 之 后 ， 使 用 旧版 本 HTML 的 页 面 仍 能 继续 工作 ， 但 它们 必 
须 有 一 个 正确 的 文档 类 型 去 匹配 所 使 用 的 HTML 版 本 ， 否 则 浏览 器 可 能 无 法 显示 该 页 面 。 



































如 有 果 声 明 的 文档 类 型 与 页 面 使 用 的 HTML 版 本 不 匹配 ， 浏 览 器 将 做 某 些 猜测 ， 这 也 许 能 让 页 
面 正常 显示 ， 但 不 会 总 是 如 此 。 所 以 不 要 指望 靠 浏 览 器 猜测 来 工作 。 如 果 网 页 非 如 你 所 想 的 那 
样 显示 ， 请 检查 并 确保 你 的 页 面 拥有 正确 的 文档 类 型 声明 (与 你 所 使 用 的 HTML 版 本 匹配 )。 
























































[小 贴 士 ] 
在 W3Schools 的 “HTML «!DOCTYPE- Declaration" ( “HTML «!DOCTYPE- 声明 ”，http:// 
www.w3schools.com/tags/tag doctype.asp ) 中 你 可 以 了 解 先 前 那些 文档 类 型 之 间 的 差别 。 





3.2.2 文档 结构 
文档 类 型 声明 之 后 的 所 有 内 容 ， 构 成 网 页 的 HTML 代码 ， 其 进一步 被 明确 分 为 两 部 分 ， 即 
«head» 元 素 部 分 和 «body» 元 素 部 分 : 


<!DOCTYPE html» 
<html> 
<head> 





^R 
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</head> 

<body> 

«/bodys 

</html> 
请 注意 ， 当 你 在 代码 示例 中 看 到 “…” 时 ， 这 表示 其 他 代码 或 内 容 将 出 现在 那里 ，“…” 
不 是 代码 的 一 部 分 。 
你 会 发 现 我 们 在 这 里 使 用 的 几 个 元 素 都 是 以 成 对 的 方式 出 现 的 ， 如 «head» 和 </head>, 
大 多 数 HTML 元 素 (并 不 是 全 部 ) 用 开始 /结束 标记 来 包含 它们 描述 的 内 容 。 这 些 开始 / 
结束 标记 间 的 所 有 内 容 构 成 了 页 面 的 <head> 元 素 部 分 。 








«html» 元 素 应 该 总 是 有 一 个 lang 属性 ， 告 诉 浏览 器 页 面 内 容 所 使 用 的 语言 ， 在 这 里 ， 
en 表示 英语 。 尽 管 这 个 属性 是 可 选 的 ， 但 它 很 重要 ， 因 为 它 可 以 告诉 屏幕 阅读 器 以 何 种 语 
言 来 读 入 ， 也 可 以 帮助 浏览 器 决定 如 何 用 连 字符 连接 单词 。 























[ 小 贴 士 ] 

如 果 你 的 网 站 使 用 的 是 英语 之 外 的 其 他 语言 (尤其 是 使 用 不 同 字 符 集 的 语言 )， 或 者 是 多 语 
言 的 ， 要 确保 你 的 网 站 能 正常 工作 ， 还 有 几 件 事 是 你 必须 知道 的 ， 可 以 先 看 一 下 W3C 上 
的 “Internationalization Techniques: Authoring HTML & CSS" ( http://www.w3.org/International/ 
techniques/authoring-html-dynamic )。 


«head» 元 素 包含 页 面 的 相关 信息 (通常 称 为 元 数据 ， 使 用 «meta» 元 素 表 述 ) 。 它 还 可 以 
包含 外 部 CSS 或 JavaScript 文件 的 链接 ， 以 及 租 入 式样 式 或 脚本 。 在 «head» 元 素 中 的 内 
容 不 会 像 页 面 内 容 那样 显示 在 页 面 上 。 


«body» 元 素 包 含 页 面 的 所 有 内 容 。 








3.2.8 页面 标题 


页 面 的 <title> 元 素 的 内 容 并 不 会 出 现在 网 页 中 ， 而 且 实际 上 也 可 以 与 你 在 页 面 中 看 到 
的 标题 完全 不 同 。 





























不 过 ， 你 写 在 <title> 元 素 中 的 语句 应 该 是 经 过 深思 熟 虑 的， 因为 它 在 其 他 的 很 多 地 方 
是 被 用 作 页 面 标题 的 ， 比 如 : 


。 在 浏览 器 窗口 的 顶部 ， 或 页 面 标签 上 (具有 多 标签 浏览 功能 的 浏览 器 ) s 
。 在 页 面 被 收藏 后 ， 用 户 的 收藏 栏 中 ; 
。 在 搜索 引擎 结果 指向 页 面 的 链接 中 。 
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Xi, «title» 元 素 的 内 容 由 站 点 名 和 页 面 标题 组 合 而 成 ， 并 用 破 折 号 、 冒 号 或 管道 符号 
分 隔 。 


举 几 个 例子 : 











«title»Metro - The Boston Globe</title> 
«title»Flickr: Groups«/title-» 
«title»Ways to Help | American Red Cross«/title- 





尽管 «title» 元 素 的 内 容 可 以 不 同 于 出 现在 页 面 上 的 标题 ， 但 它们 应 该 是 大 致 相似 的 ， 
否则 可 能 会 使 用 户 感到 困惑 。 

















长 标题 在 搜索 引擎 结果 中 会 被 截断 ， 所 以 应 控制 标题 的 长 度 。 通 常 的 指导 方针 是 不 超过 64 
个 字符 ， 尽 管 每 种 搜索 引擎 对 标题 最 大 长 度 的 限制 不 尽 相同 。 
3.2.4 FHE 


字符 集 (charset) 规定 了 你 HTML 文档 (你 在 HTML 文件 中 输入 的 所 有 HTML 代码 和 
内 容 ) 中 字符 的 编码 。 











字符 集 不 是 HTML 元 素 ， 它 是 <meta> 元 素 的 一 个 属性 ， 在 HTML 文档 的 <head> 元 素 
中 你 可 以 有 一 个 或 多 个 <meta> 元 素 ， 它 们 用 于 提供 页 面 的 相关 信息 。 


字符 编码 本 质 上 是 将 字母 、 数 值 和 符号 翻译 成 计算 机 能 够 识别 的 二 进 制 语言 的 代码 。 












































你 可 能 没有 意识 到 ， 无 论 你 用 何 种 应 用 程序 创建 你 的 HTML 文件 〈 比 如 文本 编辑 器 )， 都 会 有 
一 个 默认 的 编码 。 每 种 浏览 器 也 都 有 一 个 默认 的 编码 。 如 果 它 们 所 使 用 的 编码 不 同 ， 有 些 内 容 
会 在 转换 过 程 中 丢失 ， 所 以 你 需要 告诉 浏览 器 使 用 的 是 什么 编码 ， 否 则 页 面 可 能 无 法 显示 。 














对 于 HTMLS 页 面 你 应 该 使 用 UTF-8 字符 集 ， 这 是 网 页 中 使 用 最 广泛 和 最 灵活 的 字符 编 
码 。 它 支持 大 多 数 国际 语言 中 的 字符 : 





«meta charset="utf-8"> 


旧版 本 的 HTML 声明 字符 编码 的 方式 有 所 不 同 。 如 果 你 现在 所 工作 的 网 站 使 用 的 是 旧版 
HTML， 你 可 以 参考 一 下 W3C 网 站 上 的 “在 HTML 中 声明 字符 编码 ”(http:/www.w3.org/ 


International/questions/qa-html-encodingdeclarations ) 。 








[ 小 贴 士 ] 

有 时 当 你 从 一 个 应 用 程序 复制 粘贴 文本 到 一 个 纯 文本 编辑 器 中 ， 一 些 符 号 ( 

号 ) 将 被 问号 或 小 方 框 取代 。 这 意味 着 两 个 应 用 程序 使 用 的 是 不 同 的 编码 。 你 需要 重新 输入 
这 些 字 符 〈 或 者 做 下 搜索 与 替换 )。 





3.3 WO 
视 口 (viewport) 元 数据 元 素 在 大 多 数 非 响应 式 网 站 中 通常 是 不 使 用 的 ， 但 却 是 使 你 的 响 
应 式 站 点 工作 的 关键 。 


[ 小 贴 士 ] 
如 字符 集 一 样 ，vViewport 也 是 <meta> 元 素 的 一 个 属性 。 你 所 提供 的 每 一 种 类 型 的 元 数 
据 必 须 在 放 在 单个 «metas 元 素 中 ， 而 不 能 简单 地 在 一 个 元 素 中 组 合 所 有 的 属性 。 


视 口 是 计算 机 或 设备 屏幕 上 你 浏览 网 页 的 那 块 区 域 。 在 第 1 章 中 ， 你 已 经 知道 响应 式 设计 
中 的 媒体 查询 是 基于 视 口 宽度 的 。 


在 台式 电脑 上 ， 如 果 你 启动 浏览 器 窗口 ， 去 掉 莱 单 、 工 具 栏 、 滚 动 条 及 浏览 器 自身 的 其 他 
部 件 ， 剩 下 的 部 分 就 是 视 口 了 ， 如 图 3-1 所 示 。 
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MEDICAL MUTUAL 
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DASH 
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Medical Mutual Dart Frog Summer Concerts at the 
Dash Toledo Zoo 


at the Zoo's 
Amphitheatre this summert... 








图 3-1: 虚线 所 示 空 间 即 是 视 口 区 域 
在 移动 设备 上 ， 视 口 的 宽度 就 是 屏幕 的 宽度 。 
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viewport 这 一 元 数据 属性 会 指示 浏览 器 将 以 怎样 的 大 小 来 显示 网 页 才能 使 其 在 视 口中 正 
确 地 显示 。 





未 设置 viewport 属性 的 网 页 在 桌面 显示 器 上 是 以 全 尺寸 方式 泻 染 RER), RERA 
惯 的 浏览 方式 。 





默认 情况 下 ， 手 机 浏览 器 演 染 一 个 没有 设置 viewport 属性 的 网 页 时 ， 会 先 像 介面 浏览 器 
那样 泻 染 页 面 ， 然 后 按 比例 缩小 它 来 适 配 手 机 视 口 ， 如 图 3-2 所 示 。 如 果 有 媒体 查询 是 基 
于 视 口 的 宽度 ， 那 它们 不 会 生效 ， 因 为 浏览 器 是 按 桌 面 显示 器 尺寸 来 计算 视 口 宽度 的 。 
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图 3-2. 威斯康辛 大 学 的 整个 网 站 是 以 桌面 尺寸 泻 染 的 ， 迫 使 用 户 放大 文字 来 阅读 


大 多 数 手机 浏览 器 会 使 用 980 像素 这 一 默认 视 口 宽度 泻 染 一 个 网 页 。 想 象 一 下 你 有 一 个 
980 像素 宽 的 桌面 显示 器 ， 你 在 其 屏幕 上 看 到 的 内 容 将 按 比例 缩小 以 适应 手机 的 屏幕 。 如 
果 网 页 比 980 像素 宽 ， 它 可 能 还 得 进一步 缩小 以 适应 屏幕 。 





对 于 响应 式 网 站 ， 我 们 不 希望 手机 神 览 器 泻 染 页 面 如 同 它 是 显示 在 980 像素 宽 的 桌面 显示 
器 一 样 ， 我 们 希望 它 按 移动 设备 真实 的 屏幕 尺寸 (可 以 是 任何 宽度 ) 来 泻 染 页 面 ， 因 为 我 
们 的 网 页 已 针对 小 屏幕 宽度 进行 了 适应 性 设计 ， 并 不 需要 缩放 。 



































在 图 3-3 中 ， 我 们 可 以 看 到 《波士顿 环球 报 》 的 首页 在 iPhone 屏幕 上 的 显示 效果 ， 而 图 
3-4 中 ， 则 是 其 在 iPad 屏幕 上 的 显示 效果 。 这 个 网 站 在 两 个 屏幕 上 都 是 全 尺寸 浑 染 的 ， 尽 
管 它们 的 物理 宽度 不 同 。 
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Mob storms government 
office in Ukrainian city 


Pro-Russian protesters broke into an office in 
eastern Ukraine amid high tensions as Crimea votes 
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* Crisis stirs up old fears among Ukraine's 
Jews 


* US warns Russia on moves in Ukraine 


Menino is being treated for 
advanced cancer 


Never ane ta hack down 71-vear-ald 


图 3-3:《 波 士 顿 环球 报 》 网 站 以 全 尺寸 显示 在 iPhone 上 
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Under sunny skies, St. Patrick's Day 
parade begins, but without a mayor 


Martin Wal 





* Walsh skips parade because of exclusion of gays 
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图 3-4:《 波 士 顿 环球 报 》 网 站 以 全 尺寸 显示 在 iPad 上 
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一 般 来 说 ， 对 于 响应 式 站 点 ， 应 设置 视 口 如 下 : 


«meta name="viewport" content-"width-device-width, 
initial-scale-1"- 


3.89.4 宽度 
属性 width 告诉 浏览 器 如 何 按 比例 缩放 网 页 。 





对 于 响应 式 网 站 ， 值 width=device-width 告诉 浏览 器 以 全 尺寸 演 染 页 面 (不 管 屏幕 尺 
寸 可 能 是 多 少 )。 因 此 在 浏览 器 泻 染 页 面 时 ， 视 口 宽度 就 是 设备 的 实际 宽度 ( 即 100%)。 














如 有 果 没 有 在 viewport 元 数据 属性 中 指定 设备 的 宽度 ， 设 备 将 使 用 它 自 己 默认 的 视 口 设置 
来 演 染 页 面 。 比 如 ，iPhone 的 默认 宽度 是 980 像素 ， 所 以 在 图 3-2 中 ,浏览 器 演 染 页 面 如 
同 浏 览 器 窗口 是 980 像素 宽 一 样 ， 但 接着 缩小 它 至 1/3 的 尺寸 ， 以 便 它 适应 只 有 320 像素 
宽 的 屏幕 。 



































如 果 你 使 用 了 wiath=device-width， 当 用 户 变 换 设 备 方向 时 ， 用 来 泻 染 页 面 的 宽度 将 
自动 调整 。 因 此 ， 如 果 用 户 转换 她 的 iPhone 方向 ， 从 竖 向 变 成 横向 ， 以 320 像素 宽 渲染 的 
网 页 将 自动 以 480 像素 宽 ( 你 水 平 握 持 手机 时 的 屏幕 宽度 ) 重新 泻 染 。 


3.3.2 ”初始 缩放 比 


属性 initial-scale 告诉 浏览 器 在 屏幕 上 首次 加 载 网 页 的 时 候 如 何 缩放 它 ( 即 缩放 因子 )。 


使 用 值 initial-scale-1 意味 着 页 面 将 按 width 属性 确定 的 宽度 来 演 染 ， 不 放大 也 不 
缩小 。 


如 有 果 你 用 的 是 大 于 或 小 于 1 的 数值 ， 则 页 面 将 缩放 至 对 应 的 比例 。 例 如 ， 值 initial- 
scale-2 意味 着 页 面 会 放大 至 实际 大 小 的 两 倍 ， 因 此 你 只 能 在 屏幕 上 看 到 一 半 的 页 面 。 










































































[ 小 贴 士 ] 
如 果 你 工作 于 一 个 根本 不 包含 initialscale 属性 的 非 响应 式 网 站 ， 这 将 导致 你 的 网 站 在 
移动 设备 上 被 放大 到 一 个 巨大 的 尺寸 ， 使 得 用 户 无 法 一 次 看 到 整个 页 面 。 


3.3.3 用 户 可 缩放 
值 initial-scale 仅 决 定 网 页 在 屏幕 上 首次 加 载 时 的 大 小 。 但 要 记得 ， 你 的 移动 设备 还 
给 予 了 用 户 放大 或 缩小 内 容 的 能 力 。 





以 下 viewport 值 将 关闭 用 户 缩放 内 容 的 能 
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user-scalable-no 








不 过 ， 对 于 大 多 数 网 站 ， 你 应 该 避免 使 用 这 个 值 ， 让 用 户 在 需要 时 可 以 进行 缩放 。 尽 管 响 
应 式 站 点 不 管 屏幕 的 宽度 是 多 少 都 会 以 全 尺寸 加 载 ， 但 也 许 仍 存在 用 户 可 能 希望 放大 文字 
的 情况 ， 比 如 他 们 阅读 小 文本 有 困难 的 时 候 。 

你 应 该 只 在 非常 有 限 的 情况 下 关闭 缩放 ， 比 如 用 HTML/CSS 创建 的 游戏 或 其 他 的 一 些 
Web 应 用 程序 。 


如 果 你 不 包含 这 个 值 ， 那 默认 值 是 yes ， 其 允许 用 户 对 页 面 进行 缩放 。 












































3.3.4 ”最 大 缩放 比 
你 也 可 以 使 用 width 属性 来 设置 页 面 的 maximum-scale 值 。 例 如 ，maximum-scale=2 
意味 着 你 的 用 户 最 多 只 能 按 比例 放大 页 面 至 全 尺寸 的 两 倍 大 小 ， 之 后 就 不 能 再 放大 了 。 












































设置 maximum-scale=1 意味 着 用 户 完 全 不 能 放大 ， 与 使 用 user-scalable = 1 具有 同 
样 的 效果 。 


再 重复 一 下 ， 你 应 该 避免 使 用 此 值 ， 除 了 在 非常 特殊 的 情况 下 。 


[小 贴 士 ] 

你 可 能 已 经 注意 到 ， 我 在 书写 元 素 名 和 属性 名 时 都 用 的 是 小 写 ， 在 HTMLS F, 元素 和 属性 
是 不 区 分 大 小 写 的 。 也 就 是 说 ， 你 可 以 用 小 写字 母 、 大 写字 母 或 任意 组 合 来 书写 元 素 和 属 
性 。 大 多 数 开发 人 员 使 用 小 写字 母 ， 因 为 小 写 形式 的 单词 比 大 写 形式 更 容易 阅读 。 





3.4 结构 性 元 素 
«body» 元 素 包 含 所 有 的 页 面 内 容 。 


Hc. 我们 将 使 用 HTMLS 结构 性 元 素 将 页 面 划 分 为 几 个 主要 的 部 分 ， 比 如 «header, 
«nav», «footer» (它们 称 为 结构 性 元 素 ， 因 为 它们 定义 了 页 面 的 结构 )。 这 使 得 我 们 更 
容易 将 样式 应 用 于 页 面 的 不 同 部 分 。 





























每 个 页 面部 分 的 元 素 都 有 描述 性 的 名 字 ， 如 <header>、<footer>、<nav> (导航 )、 


<section> 和 <aside>。 











这 些 元 素 是 HTMLS 中 的 新 元 素 。 此 前 ， 网 页 设计 师 使 用 通用 元 素 如 <div> (区 块 ) 将 页 
面 分 成 几 个 部 分 ， 然 后 使 用 idk class 属性 来 标识 每 个 元 素 ， 以 便 在 应 用 CSS 时 能 针对 
特定 的 部 分 。 
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使 用 结构 性 元 素 是 标记 语义 化 的 一 个 例子 ， 标 记 语 义 化 是 指使 用 能 准确 地 描述 页 面 内 容 含 
意 的 元 素 ， 而 不 是 像 «divo 那样 的 通用 元 素 。 


[小 贴 士 ] 
虽然 我 向 你 展示 了 如 何 使 用 特定 的 元 素 作 为 首选 方法 来 构建 HTML 页 面 ， 但 它们 并 不 是 必 
需 的 。 事 实 上 ， 没 有 元 素 必 须 包 含 在 网 页 的 元 素 中 。 


3.4.1 屏幕 阅读 器 

此 外 ， 结 构 性 元 素 还 能 帮助 用 户 方便 地 使 用 辅助 技术 来 导航 页 面 ， 这 些 辅助 技术 包括 能 够 
为 盲人 用 户 朗 读 页 面 内 容 的 屏幕 阅读 器 ， 或 者 语音 命令 软件 ， 它 允许 用 户 在 无 法 使 用 键盘 
或 鼠标 的 情况 下 与 计算 机 交谈 〈 例 如 ， 用 户 可 能 会 说 “导航 ”)。 


[ 小 贴 士 ] 

在 创建 一 个 网 站 时 ， 你 需要 确保 网 站 对 于 残障 人 士 的 可 访问 性 。 我 们 将 在 第 8 章 中 深入 探讨 
可 访问 性 。Web 可 访问 性 与 可 用 性 密切 相关 ， 你 可 以 查看 W3C 中 的 文章 “Web Accessibility 
and Usability Working Together" ( http://www.w3.org/WAl/intro/usable ) 来 做 更 多 的 了 解 。 


但 是 ， 并 非 所 有 的 老式 浏览 器 和 屏幕 阅读 器 都 能 识别 这 些 新 元 素 ， 所 以 我 们 需要 做 一 些 额 
外 的 努力 来 照顾 它们 。 





在 这 些 新 元 素 出 现 之 前 ， 已 有 一 个 单独 的 规范 来 帮助 网 站 使 之 是 完全 可 访问 的 。 这 就 是 同 
FEBA W3C (为 我 们 制定 了 HTML 规范 ) 的 WAI-ARIA (Web 可 访问 性 倡议 可 访问 
的 丰富 互联 网 应 用 )。 它 是 一 组 可 以 被 添加 到 HTML 元 素 中 的 属性 ， 用 以 提供 额外 的 信息 
和 功能 。 











WALARIA 中 的 一 部 分 是 角色 (role) 属性 ， 它 们 可 以 在 HIML 元 素 中 设置 ， 以 提供 更 多 
关于 元 素 作 用 的 信息 ， 许 多 角色 属性 可 以 与 新 的 HTMLS 结构 性 元 素 对 应 。 


新 的 结构 性 元 素 确 实 棒 极 了 ， 但 因为 它们 是 刚刚 新 加 入 到 HTML 中 的 ， 所 以 不 是 所 有 的 
浏览 器 和 屏幕 陪读 器 都 能 够 利用 这 些 元 素 ， 我 们 还 需要 在 我 们 的 结构 性 元 素 上 包含 相应 的 
WALARIA 角色 属性 。 








新 的 浏览 器 会 查看 HTML 元 素 ， 而 老式 浏览 器 则 查看 WAI-ARIA 角色 属性 。 








我 将 在 讲解 每 个 页 面 元 素 时 同时 对 WALARIA 角色 属性 进行 解释 。 虽 然 它们 不 是 必需 的 ， 
但 最 好 在 你 的 代码 中 包含 它 们 ， 以 使 网 站 拥有 最 大 限度 的 可 访问 性 。 














3.4.2 «header» 


Tr, EWEFA, <body> 元 素 中 的 首 个 子 元 素 是 «headers, (EE «head» 和 «headers 
是 不 同 的 元 素 ， 它 们 容易 让 人 混 清 。) 














依照 HTML 规范 ， 在 «header» 元 素 中 应 包含 介绍 性 和 导航 性 的 辅助 内 容 ， 这 可 能 包括 
Logo、 搜 索 功 能 和 主导 航 栏 。 








除了 整个 页 面 可 以 有 个 <header> 元 素 ， 你 也 可 以 在 页 面 的 其 他 地 方 增加 <header> 元 
素 ， 用 来 包含 针对 特定 页 面 区 块 的 介绍 性 和 导航 性 的 辅助 内 容 。 


对 应 的 WALARIA 属性 是 banner， 因 此 你 只 需 将 其 作为 一 个 属性 添加 到 «header» 元 素 : 
































«header role="banner"> 
</header> 
3.4.3 «nav» 


页 面 主 导航 包含 在 一 个 «nav» 元 素 中 ， 与 页 面 中 的 二 级 导航 一 样 。 通 常 在 «header» 7038 
中 会 有 一 个 <nav> 元 素 ， 但 也 并 非 总 是 如 此 。 


导航 可 以 是 连接 站 点 其 他 页 面 的 链接 ， 也 可 以 链接 同一 页 面 上 的 内 容 ， 比 如 在 一 个 目录 表 中 。 



























































一 个 页 面 中 可 以 有 多 个 «nav» 元 素 。 相 应 的 WAI-ARIA 属性 是 navigation 














«nav role-"navigation"- 
«/navs 
3.4.4 «footer» 
脚 标 元 素 <footer> 是 页 面 上 的 一 个 区 块 ， 不 一 定 在 最 后 ， 其 包含 页 面 内 容 的 有 关 信 息 。 


例如 ， 一 个 脚 标 可 能 包含 版 权 声明 ， 页 面相 关 信息 ， 以 及 连接 到 相关 资料 〈 比 如 隐私 政策 
或 联系 页 面 ) 的 链接 。 


除了 用 作 整 个 页 面 的 页 脚 ， 你 也 可 以 在 页 面 的 其 他 地 方 设置 脚 标 ， 对 内 容 区 块 而 不 是 整个 
页 面 执行 相同 的 功能 。 

































































在 一 个 页 面 中 可 以 有 多 个 <footer>。 相 应 的 WAI-ARIA 属性 是 contentinfo: 














«footer role-"contentinfo"- 


«/footer» 
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3.4.5 «article» 


一 个 «article» 元 素 是 网 页 上 一 块 独立 的 内 容 。 它 可 能 是 一 篇 报纸 文章 ， 一 篇 博客 或 论 
坛 帖子 。 因 为 它 是 独立 的 ， 这 种 类 型 的 内 容 可 以 通过 内 容 聚 合 来 分 发 (如 RSS 订阅 )。 








一 个 页 面 可 以 有 多 个 «article» 元 素 。 没 有 WAI-ARIA 属性 对 应 于 «article» 元 素 : 














«article» 


«/article» 


3.4.6 «aside» 


一 个 «aside» 元 素 用 于 次 要 的 内 容 ， 可 以 是 与 网 站 或 整个 页 面相 关 的 (例如 一 个 友情 链 
接 ) ， 或 者 如 果 它 是 读 套 在 一 个 <article> 元 素 中 ， 那 就 是 与 文章 相关 的 (例如 一 个 术 
语 表 )。 


你 可 以 在 一 个 页 面 上 拥有 多 个 «aside» 元 素 。 相 应 的 WALARIA 属性 是 complementary: 
«aside role-"complementary"- 
7 

3.4.7 IE 支持 

对 于 这 些 新 的 HTMLS 结构 性 元 素 ， 有 一 个 小 问题 就 是 一 些 老 的 浏览 器 不 能 识别 这 些 元 素 。 


对 于 大 多 数 浏览 器 ， 这 没什么 大 不 了 的 。 它 们 对 待 无 法 识别 的 元 素 就 像 对 待 普通 的 
<span> 元 素 一 样 。 














但 是 ， 尽 管 旧 版 本 的 Internet Explorer (IE8 及 其 更 早 版 本 ) Z f «span» 元 素 一 样 来 显示 
这 些 元 素 ， 但 却 也 会 拒绝 对 它们 应 用 任何 CSS 样式 ， 这 可 真 的 会 搞 磺 一 个 页 面 的 设计 。 


























所 以 ， 如 果 你 想 让 你 的 网 站 能 够 在 那些 老 版 本 的 TE 中 正确 显示 ， 你 需要 加 一 点 JavaScript, 
这 会 有 助 于 浏览 器 识别 这 些 新 元 素 。 





有 两 种 方法 来 做 这 件 事 。 而 且 不 用 担心 ， 使 用 它们 并 不 需要 你 懂 JavaScript ! 


第 一 种 变通 方案 是 使 用 所 谓 的 腻子 (polyfill) 或 利刃 (shiv) 脚本 ， 其 是 一 小 段 用 来 使 一 
个 老式 浏览 器 变 得 像 新 浏览 器 一 样 的 代码 。 





HTMLS Shiv (https://github.com/aFarkas/html5shiv) 是 由 几 位 开发 人 员 (JL GitHub 页 面 中 
所 有 贡献 人 列表 ) 创建 和 改进 的 一 段 代 码 ， 你 需要 做 的 所 有 事情 就 是 按照 页 面 上 的 说 明 ， 
下 载 一 个 JavaScript 文件 ， 并 将 它 添加 到 你 的 网 站 中 ， 然 后 在 站 点 页 面 的 «head» 元 素 中 
链接 它 (如 果 你 不 知道 Bower 是 什么 ， 使 用 手工 安装 说 明 )。 
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安装 说 明 指 示 我 们 使 用 以 下 代码 来 添加 shiv 到 我 们 的 网 站 : 
<!--[if lt IE 9]> 


<script src-"files/html5shiv.js"»«/script» 
<! [endif] --> 


行 代 码 表示 仅 在 浏览 器 是 Internet Explorer 且 版 本 早 于 IE9 时 才 运 行 脚 本 。 














也 还 有 其 他 的 资源 ， 比 如 : Modernizr (http:/modernizr.com/) ， 它 做 与 HTMLS Shiv 相同 的 





3.5 创建 一 个 页 面 

对 于 我 们 的 示例 页 面 ， 我 们 将 从 一 些 常见 的 元 素 着 手 。 

我 们 将 创建 一 个 有 关 大 熊猫 的 网 站 ， 标 题 是 “永远 的 大 熊猫 ”>， 为 简化 例子 ， 我 们 只 使 用 
一 些 基 本 的 内 容 片 段 。 

在 大 多 数 的 网 站 上 ， 你 会 使 用 CMS (包括 如 WordPress 那样 的 博客 软件 )， 所 以 HTML 代 


码 可 能 出 于 编辑 目的 分 布 于 数 个 单独 的 文件 ， 而 不 是 全 都 在 一 个 页 面 上 ， 但 对 于 本 例 的 目 
的 而 言 ， 我 们 的 HTML 代码 都 在 一 页 上 。 


如 果 你 是 网 页 制作 的 新 手 ， 先 在 你 的 电脑 上 打开 一 个 文本 编辑 器 ， 如 Mac OS 中 的 
TextEdit， 或 Microsoft Windows 中 的 记事 本 。 以 “.html” 扩 展 名 ， 而 不 是 “.txt”， 保 存 
包含 你 的 HTML 代码 的 文件 。 然 后 ， 你 就 可 以 在 浏览 器 中 打开 并 浏览 它 了 ， 就 像 网 页 
那样 。 


3.5.1 结构 性 元 素 


在 «body» 元 素 中 ， 首 先 以 «header» 元 素 开 始 ， 它 包含 了 页 面 标题 ， 紧 接着 是 <nav> 元 
素 ， 它 包含 了 导航 链接 。 


在 «header» 元 素 之 后 是 «article» 元 素 ， 我 们 会 有 一 篇 博客 内 容 包含 在 其 中 。 然 后 用 
«aside» 元 素 创建 相关 链接 部 分 ， 因 为 它 是 页 面 的 补充 信息 。 


页 面 将 以 <footer> 元 素 结束 ， 它 包含 了 一 些 附加 信息 ， 比 如 我 们 的 版 权 声明 : 











































































































<body> 
«header role=""banner"> 
«nav role-"navigation"»...«/nav» 
«/header» 
«article»...«/article» 
«aside role-"complementary"»...«/aside» 
«footer role-"contentinfo"»...«/footer» 
«/body» 
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[ 小 贴 士 ] 
KRE HTML 页 面 中 经 常 看 到 元 素 以 不 同 的 层次 缩 进 ， 就 像 上 面 的 例子 那样 。 这 不 是 必须 


的 ， 浏 览 器 会 忽略 掉 额 外 的 空格 ， 但 它 有 助 于 帮助 开发 人 员 看 清 页 面 结构 ， 并 能 够 更 容易 地 
匹配 开始 和 结束 标记 。 


3.5.2 WAAR 


请 记 住 这 





一 点 ， 


A^": 








我 们 编写 的 页 面 必要 时 不 借助 CSS 也 能 浏览 。 如 果 没 有 页 面 布局 的 话 ， 所 


























有 内 容 应 该 按照 我 们 想 要 它 出 现在 页 面 上 的 顺序 来 编码 ， 也 就 是 一 块 内 容 接 着 另 一 块 内 


容 
o 

















将 所 有 的 片段 拼 到 一 起 ， 并 加 入 内 容 ， 我 们 得 到 以 下 代码 : 





<!DOCTYPE html» 
«html lang="en"> 
«head» 
«title»Pandas Forever«/title» 

«meta charset-"utf-8"- 

«meta name-"viewport" content-"width-device-width, 
initial-scale-1"- 


<!--[if lt IE 9]> 
«script src-"files/html5shiv.js"»«/script» 
<! [endif]--> 
</head> 
<body> 


«header role="banner"> 


<hl>Pandas Forever«c/h1l» 

«nav role="navigation"> 

«ul» 

<li><a href-"/"sHomec/a»«/li» 

<li><a href-"/about/"»About«/a»«/li» 
<li><a href-"/links/"»Links«/a»«/li» 
<li><a href-"/contact/"»Contact«/a»«/li» 
«/nav» 


«/header» 
«article» 


«h2»Pandas in Wolong</h2> 

«p»The Wolong National Nature Preserve, in the 
Sichuan Province of China, is home to more than 
150 giant pandas. It's one of the key sites for 
panda breeding research, and 66 cubs have been 
born at Wolong since it was established in 1980. 
Pandas are an endangered species, with between 
1500 and 3000 living in the wild, and less than 
300 in captivity (research centers and zoos).«/p» 


«/article» 
«aside role-"complementary"- 


«h2»Related Links</h2> 





<ul> 
<li><a href="http://www.flickr.com/groups/ 
pandasunlimited/">Pandas Unlimited«/a»«/li» 
<li><a href-"http://nationalzoo.si.edu/animals/ 
webcams/giant-panda.cfm">National Zoo Panda 
Cams</a></li> 
<li><a href="http://worldwildlife.org/species/ 
giant-panda">Panda Facts at WWF«/a»«/li» 
«/ul» 
«/aside» 
«footer role-"contentinfo"- 
«p»&copy; 2014 Pandas Forever«/p» 
«/£footer» 
«/body» 
</html> 


我 们 拥有 所 有 人 先前 提 到 的 <header> 中 的 元 素 ， 包 括 HTMLS Shiv, 3&4] EE HTMLS Shiv 
到 网 站 的 files 目录 中 ， 并 按 安装 指 南 说 明 的 方式 来 链接 它 ， 以 便 TES 及 其 更 早 版 本 的 浏览 
器 能 识别 新 的 HTMLS 结构 性 元 素 。 


网 站 标题 使 用 <h1>， 页 面 标题 使 用 <h2>。 导 航 设计 的 惯例 通常 是 把 它 放 在 一 个 无 序列 
表 <ul > 元 素 中 ， 尽 管 不 是 必须 要 这 么 做 。 如 果 你 愿意 ， 对 于 每 个 导航 项 你 也 可 以 使 用 
«span» 或 «div» 元 素 。 

在 «body» 元 素 中 ， 我 们 添加 了 所 有 的 内 容 。 这 是 一 个 非常 简单 的 页 面 ， 类 似 于 你 见 过 的 
文章 或 博客 。 


再 往 下 ，<footer> 元 素 包 含 了 我 们 的 版 权 声明 。 


























3.5.3 无 样式 页 面 
首先 从 无 样式 的 内 容 开 始 ， 图 3-5 是 在 没有 应 用 任何 CSS 样式 的 情况 下 ， 页 面 在 桌面 浏览 
器 中 看 到 的 效果 ， 而 图 3-6 则 是 在 iPhone 上 看 到 的 效果 。 
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The Wolong National Nature Preserve, in the Sichuan Province of China, is home to more than 150 giant pandas. It's one of the key sites for panda breeding research, and 66 cubs have been born at 
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图 3-5: 在 没有 应 用 CSS 样式 时 ， 网 站 在 桌面 显示 器 上 的 显示 效果 
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Related I ink« 
3-6: 在 没有 应 用 CSS 样式 时 ， 网 站 在 iPhone 上 的 显示 效果 


我 们 目前 还 没 添加 任何 CSS 样式 ， 网 站 就 已 经 是 响应 式 的 了 ! HTML 默认 是 响应 式 的 。 


3.6 清晰 和 语义 化 的 HTML 

保持 代码 尽 可 能 简洁 是 网 站 运行 良好 的 关键 。 我 并 不 是 说 要 使 设计 过 分 简单 ， 我 是 说 当 你 
创建 代码 来 显示 你 的 设计 时 ， 你 要 保持 代码 简单 明了 。 

这 将 使 你 的 站 点 代码 更 容易 编写 和 维护。 


正确 地 使 用 HTML 元 素 ， 并 确保 你 对 所 有 元 素 都 是 熟悉 的 ， 那 样 你 就 知道 什么 元 素 符合 你 


一 开始 ， 你 就 应 该 确保 把 最 基本 的 做 好 ， 比 如 对 分 级 标题 使 用 分 级 标题 元 素 〈 且 以 正确 的 
序号 ) ， 对 列表 使 用 列表 元 素 ， 等 等 。 同 时 也 要 运用 我 们 在 本 章 早 些 时 候 所 讲 到 的 新 元 素 
«nav» 和 «section» 去 正确 标注 页 面 的 各 个 部 分 。 























«div» 和 <span> 是 没有 任何 语义 的 容器 元 素 。 你 可 以 在 没有 语义 HTML 元 素 能 够 表达 你 
需要 的 含义 时 使 用 它们 ,但 应 谨慎 ， 只 在 必要 时 为 之 。 


3.6.1 分 离 内 容 与 表现 
HTML 和 CSS 是 独立 的 语言 ， 具 有 不 同 的 用 途 。HTML 用 于 显示 内 容 并 提供 内 容 的 相关 
信息 ， 并 不 提供 任何 样式 或 装饰 。CSS 用 于 决定 站 点 的 视觉 外 观 ， 如 布局 、 字 体 、 文 字 大 





小 和 颜色 。 
你 的 内 容 可 能 并 不 总 是 以 你 所 期 望 的 样式 来 显示 ， 所 以 确保 不 使 用 CSS 来 表达 意义 。 


例如 ， 使 用 适当 的 分 级 标题 («hl» 到 <h6>) 将 确保 所 有 的 设备 和 浏览 器 在 显示 内 容 时 ， 
即使 不 能 应 用 CSS， 也 知道 哪 一 部 分 是 最 重要 的 。 再 比如 ， 对 于 使 用 屏幕 阅读 器 的 家 人 用 
户 ， 如 果 阅 读 器 软件 知道 页 面 是 按 分 级 标题 分 成 若干 章节 ， 它 就 能 让 用 户 在 章节 间 跳 转 ， 
而 不 用 从 头 到 尾 通 朗 读 整个 页 面 。 


另 一 方面 ， 如 果 你 使 用 CSS 来 给 标题 一 个 粗大 的 字体 ， 但 是 却 忽略 了 使 用 恰当 的 HTML 
分 级 标题 元 素 ， 浏 览 器 实际 上 不 会 知道 这 些 文字 是 描述 页 面 上 内 容 的 标题 。 



























































即使 排除 了 残障 人 士 ， 仍 会 有 很 多 人 是 从 其 他 地 方 访问 你 网 站 的 内 容 ， 而 不 是 从 你 网 站 上 
的 某 个 页 面 ， 因 此 他 们 看 不 到 你 的 设计 ， 只 能 看 到 你 的 内 容 。 


这 些 用 户 可 能 使 用 的 是 我 们 在 第 2 章 中 所 谈 到 的 RSS 阅读 器 或 稍 后 阅读 (read-later) 应 
用 。 为 使 他 们 能 够 正确 地 查看 你 的 内 容 ， 内 容 必 须 是 结构 化 的 ， 这 样 软 件 才 能 够 正确 显示 
它们 。 

同时 ， 一 些 最 重要 的 访客 一 一 搜索 引擎 一 一 来 到 你 的 网 站 时 ， 它 们 看 不 到 网 站 的 设计 。 
当 搜 索引 警 软件 〈 称 为 机 器 人 ) 查看 你 的 网 站 时 ， 它 只 看 HTML， 而 不 是 设计 。 它 使 用 
HTML 提供 的 信息 来 确定 你 的 页 面 应 该 如 何 分 类 和 出 现在 搜索 结果 中 。 


使 用 HTML 结构 化 方法 组 织 你 的 内 容 ， 这 样 搜索 引擎 就 能 够 知道 页 面 上 不 同 部 分 的 内 容 是 
什么 ， 而 不 只 是 给 它们 一 扒 杂 乱 的 文字 。 如 有 果 你 的 页 面 没 有 使 用 语义 化 代码 ， 肯 定 会 对 你 
的 网 站 在 搜索 引擎 结果 中 的 排 位 造成 负面 影响 。 




































































设计 页 面 结构 之 初 ， 首 先是 要 确保 你 的 内 容 在 任何 地 方 都 可 以 被 正确 理解 和 显示 。 














3.6.2 it 
注释 是 你 的 HTML (和 CSS) 文件 中 的 重要 部 分 ， 尽 管用 户 从 不 会 看 到 它们 。 使 用 注释 ， 
你 可 以 添加 说 明 到 源码 中 ， 浏 览 器 在 显示 页 面 时 会 简单 地 忽略 掉 它 们 。 例 如 : 





«1-- 这 是 一 个 HTML 注释 --> 





«1-- 这 

是 另 一 个 注释 ， 

分 成 多 行 --> 
注释 对 开发 人 员 或 者 要 用 到 页 面 上 代码 的 任何 人 都 是 有 用 的 。 通 党 情况 下 ， 随 着 时 间 的 变 
迁 网 站 的 员工 也 是 经 常 变 换 的 ， 注 释 可 以 用 来 解释 为 什么 要 以 这 种 方式 来 设置 ， 或 者 提示 
这 些 代码 是 做 什么 的 。 
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这 在 响应 式 网 站 中 尤其 重要 ， 因 为 有 太 多 的 代码 了 。 在 代码 中 加 入 注释 能 让 你 更 容易 知道 
每 部 分 代码 都 是 做 什么 用 的 。 当 然 ， 也 不 要 走 极 端 ， 添 加 注释 与 增加 代码 一 样 将 使 页 面 文 
件 变 大 ， 这 会 增加 下 载 时 间 。 


你 可 能 注意 到 ， 注 释 使 用 的 语法 类 似 于 我 们 前 面 添加 HTML5 Shiv 到 示例 网 站 中 的 代码 : 





<!--[if lt IE 9]> 
«script src-"files/html5shiv.js"»«/script» 
<! [endif]--> 


以 上 代码 实际 上 叫 作 条 件 注释 (conditional comment)， 它 们 只 能 被 正 浏 览 器 识别 (其 他 
浏览 器 只 将 其 当 作 普通 的 注释 并 忽略 ) ， 可 以 用 来 给 予 IE 特别 的 指示 。 

















3.7 fd 


所 有 的 网 页 都 是 用 HTML 创建 的 ， 它 是 一 种 标记 语言 ， 使 用 元 素 (标记 ) 为 每 一 块 内 容 赋 
予 含义 和 上 下 文 场景 。 








HTML 当前 的 最 新 版 本 是 HTML5。HTML 文档 最 开头 的 文档 类 型 声明 告诉 浏览 器 你 的 网 
页 是 以 哪个 版 本 的 HTML 编写 的 。 并 非 所 有 HTMLS 元 素 都 已 被 支持 ， 所 以 你 需要 知道 哪 
些 元 素 可 以 安全 地 使 用 ， 哪 些 元 素 需 要 额外 的 代码 才能 在 老式 浏览 器 中 工作 。 











你 需要 遵循 由 W3C 制定 的 Web 标准 ， 这 样 浏览 器 将 按 你 期 望 的 方式 来 显示 你 的 网 站 。 














你 的 HTML 文档 以 文档 类 型 声明 开头 ， 接 着 是 «head» 元 素 ， 其 提供 页 面 的 相关 信息 ， 如 
页 面 标题 (<title>)， 并 告诉 浏览 器 应 该 如 何 显示 页 面 的 信息 ， 比 如 字符 集 (charset) 
FLO (viewpoint)。 对 于 响应 式 网 站 ， 视 口 是 确 保 页 面 能 正确 显示 的 关键 。 





























紧 随 «head» 元 素 之 后 的 是 <body> 元 素 ， 其 包含 所 有 的 页 面 内 容 。 使 用 语义 化 HTML 正确 
地 表达 每 个 页 面 元 素 的 含义 ， 这 样 不 管 是 以 何 种 设备 或 方式 浏览 内 容 ， 它 都 能 正确 地 显示 。 




















页 面 结构 可 以 使 用 数 个 HTMLS5 结构 性 元 素来 建立 ， 如 «header», «footer», «nav», 
«section» 和 <aside>。 要 使 你 的 网 站 是 完全 可 访问 的 ， 你 还 需要 在 这 些 元 素 上 使 用 
WAI-ARIA 属性 为 老式 的 不 能 识别 HTML5 元 素 的 屏幕 阅读 器 提供 导航 帮助 。 














编写 简洁 的 语义 化 HTML. 代码 、 分 离 内 容 与 表现 等 ， 这 些 对 于 响应 式 网 站 尤其 重要 ， 因 为 
有 太 多 复杂 的 事 要 做 。 你 还 应 该 在 你 的 代码 中 包含 注释 ， 这 些 文档 化 信息 对 于 将 来 接手 网 
站 工作 的 人 们 是 有 帮助 的 。 


在 第 A 章 中 ， 我 们 将 学 习 如 何在 网 页 中 应 用 CSS 样式 ， 并 为 我 们 的 示例 网 站 添加 一 些 样 式 。 

















第 


438 





响应 式 网 站 之 C35 


HTML 赋予 网 站 中 所 有 内 容 以 结构 ，CSS 则 告诉 浏览 器 以 什么 样式 来 显示 这 些 内 容 。 


如 同 第 3 章 ， 对 于 已 经 熟悉 CSS 的 人 来 说 本 章 将 是 一 
更 加 深入 地 介绍 CSS 的 基本 概念 ， 因 





登 与 盒 模型 等 概念 ， 才 能 真正 明白 如 何 创建 一 个 响应 式 网 站 。 


我 们 首先 会 介绍 CSS 的 作用 、CSS 的 版 本 ， 以 及 如 何 通过 浏览 器 前 组 来 确保 新 的 样式 属性 
可 以 在 不 同 浏览 嚣 中 被 恰当 地 泻 染 ， 即 使 这 些 属性 还 处 在 测试 阶段 。 


然后 我 们 会 看 看 如 何在 网 站 中 添加 样式 。 
可 以 使 用 样式 表 将 样式 应 用 于 多 个 页 面 或 整个 网 站 ， 还 可 以 对 单个 元 素 使 用 内 联 村 























个 复习 。 不 过 ， 相 比 HTML 我 们 会 
为 它 是 构成 响应 式 设 计 的 代码 基础 。 只 有 透彻 理解 层 


方法 有 许多 ， 你 可 以 在 网 页 中 直接 租 入 样式 ， 也 


EX. 





接 下 来 ， 你 将 了 解 层 全 (cascade) WRK, CERAK (CSS, Cascading Style Sheet) 


这 个 名 称 的 由 来 。 层 全 决定 了 应 用 村 











选择 。 我 们 也 会 讨论 在 网 站 中 如 何 使 用 层 倒 将 样式 规则 之 间 的 干扰 降 到 最 低 。 

















钰 的 顺序 以 及 在 样式 规则 发 生 冲 突 时 浏览 器 如 何 进行 


之 后 ， 我 们 将 重 温 金 模型 (box model) 的 概念 ， 其 决定 了 元 素 如 何 显示 在 网 页 上 : 每 个 


元 素 都 被 视 作 一 个 盒子 ， 拥 有 宽度 、 高 度 、 外 边 距 、 内 边 距 和 边框 
我 们 也 会 讲 到 显示 (display) 和 定位 (positioning)， 它 们 将 影响 元 素 被 放置 于 页 画 


么 位 置 。 








E 等 属性 值 《有 时 是 零 )。 





i 上 的 什 











最 后 ， 我 们 将 回 到 示例 页 
视觉 定义 。 


























由 ， 添 加 一 些 基本 的 文字 排版 和 布局 样式 ， 从 而 为 页 面 赋予 一 些 
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4.14 CSS 的 工作 方式 


为 了 方便 那些 还 不 熟悉 CSS 的 读者 学 习 后 续 内 容 ， 本 市 将 简要 介绍 样式 表 中 的 代码 是 如 何 
组 合 的 。 虽 然 无 法 涵盖 你 能 用 CSS 做 出 的 所 有 组 合 变化 ， 但 也 足够 你 了 解 CSS 的 作用 了 。 





首先 ， 每 次 你 应 用 样式 于 一 个 HTML 元 素 时 ， 这 称 作 一 条 CSS 规则 (rule) : 





p { color: red; ] 


每 条 规则 由 两 个 独立 的 部 分 组 成 ， 选 择 器 (selector) 对 应 于 要 应 用 样式 的 HTML 7538 
(只 是 没有 尖 插 号)。 在 上 面 那 条 规则 中 ，p 对 应 于 HTML 元 素 <p>。 该 规则 告诉 了 浏览 器 
要 如 何 显示 页 面 上 的 段落 。 




















在 选择 器 之 后 ， 你 可 以 有 一 个 或 多 个 声明 (declaration)。 它 们 包含 在 大 括号 中 ， 定 义 了 将 
应 用 到 该 元 素 的 样式 。 


在 声明 中 ， 属 性 (property) 是 你 可 以 改变 的 元 素 特性 ， 比 如 颜色 或 宽度 。 你 需要 设置 一 
个 值 ， 比 如 楼 色 或 50%。 每 个 属性 后 跟 一 个 冒号 ， 然 后 是 属性 的 值 ， 像 前 面 例子 中 的 声明 
color: red， 就 是 指定 段落 文本 颜色 为 红色 。 











如 果 在 同一 条 规则 中 有 多 个 声明 ， 它 们 之 间 用 分 号 隔 开 : 





p { color: red; font-size: 1.5em; } 








最 后 一 个 声明 (或 者 只 有 一 个 声明 ) 后 面 的 分 号 可 以 省 略 ， 但 出 于 一 致 性 的 考虑 ， 大 多 数 
开发 人 员 还 是 会 带 上 它 。 包 含 在 大 括号 中 的 多 个 声明 称 为 声明 组 (declaration group) 


通过 使 用 类 或 ID 选择 器 ， 样 式 也 可 以 应 用 于 元 素 的 子 集 ，: 

















.classname { color: blue; ) 
#idname ( color: green; } 


这 两 行 代码 将 分 别 影响 类 属性 为 clasename H (H <p class-"classname"s) 及 
ID 属性 为 idname 的 元 素 ( 即 «div id="idname">), 











类 和 ID 选择 器 的 用 途 相似 ， 允 许 你 针对 页 面 上 的 任何 元 素 进 行 样式 设 定 。 但 ID 选择 器 只 
能 应 用 样式 于 单个 元 素 ， 而 类 选择 器 则 允许 你 应 用 样式 于 任意 多 个 元 素 。 


























你 应 该 对 类 和 ID 使 用 描述 性 名 称 。 虽 然 浏览 器 就 像 对 HTML 一 样 ， 并 不 会 在 意 它们 是 否 
有 意义 ， 但 当 名 称 能 够 明显 地 表达 它 所 对 应 的 含义 时 ， 开 发 人 员 能 更 好 地 理解 它 。 




















示例 : 


«p class-"intro"»...«/p» 
«nav id-"main"»...«/nav» 
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你 也 可 以 用 后 代 选 择 器 (descendant selector) 来 针对 更 具体 的 元 素 进行 样式 设 定 ， 这 意味 
着 某 些 在 元 素 之 中 的 元 素 : 





.classname p { color: purple; ) 


在 上 面 的 代码 中 ， 我 们 告诉 浏览 器 首先 查找 类 属性 为 classname 的 元 素 ， 然 后 这 些 元 素 
中 的 «p» 元 素 的 文本 颜色 应 该 是 紫色 (而 对 于 那些 类 属性 不 为 classname 的 元 素 中 的 
«p» 元 素 则 无 影响 )。 














如 果 你 希望 同样 的 样式 也 应 用 于 多 个 选择 器 ， 可 以 使 用 逗号 将 它们 组 合 在 一 起 使 用 ， 而 非 
创建 两 条 独立 的 规则 : 





hi, h2 ( color: green; ) 
这 个 例子 告诉 浏览 器 ，<h1l> 和 «h2» 元 素 的 文本 颜色 都 应 该 是 绿色 的 。 


当 你 编写 CSS 时 ， 空 格 〈 后 代 选 择 器 中 的 空格 ， 比 如 前 面 例子 中 的 .classname P 除外 ) 
和 换行 都 是 可 选 的 。 


因此 ,一些 看 起 来 像 这 样 的 样式 表 ， 是 完全 正确 的 (尽管 难以 阅读 ) : 





p{color:green}div{width:50%;backgroundcolor:blue}.classname{color:yellow} 


过 删除 空格 (或 优化 样式 表 ) 可 以 减少 CSS 文件 的 尺寸 ( 字 节 少 一 个 算 一 个 )， 这 将 使 
e 掉 加 载 得 更 快 (我 们 将 在 第 11 章 中 讨论 如 何 使 用 软件 自动 删除 空格 ) 。 























[ 小 贴 士 ] 

优化 过 的 样式 表 是 很 难 阅 读 的 ， 因 为 所 有 的 内 容 都 连 在 了 一 起 。 有 一 些 在 线 工 具 可 以 在 适当 
的 位 置 添 加 空格 和 换行 ， 从 而 方便 阅读 。 你 可 试 一 下 Clean CSS ( http;//www.cleancss.com/ ), 
或 者 直接 在 网 上 搜索 CSS 优化 工具 ( CSS optimizer )。 


4.2 ”CSS 版 本 


与 HTML 一 样 ，CSS 也 有 不 同 的 版 本 。CSS 第 一 版 发 布 于 1996 年 ， 仅 比 HTML 第 一 版 晚 
几 年 发 布 。 最 新 的 版 本 是 CSS3。 


每 一 版 CSS 包含 了 所 有 可 用 CSS 样式 化 的 属性 。 属 性 是 能 够 被 样式 影响 的 HTML 元 素 的 
特性 。 这 些 特 性 包括 元 素 的 颜色 、 字 体 、 大 小 及 元 素 在 页 面 上 的 位 置 ， 等 等 。 


CSS3 引入 了 一 些 新 的 属性 。CSS3 最 显著 的 变化 之 一 是 增加 了 媒体 查询 ， 这 使 得 响应 式 设 
计 成 为 可 能 。 你 将 在 第 5 章 更 深入 地 了 解 媒体 查询 的 工作 方式 。 
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还 是 和 HTML FÉ, JEAZEPUG BID V a8 HORE CE ULTRI [28 3 ic 2 eih CSS 中 的 所 
有 属性 ， 我 会 在 书 中 标明 哪些 属性 是 你 需要 注意 的 。 

另外 还 要 注意 ， 也 并 非 所 有 的 浏览 器 都 会 以 完全 相同 的 方式 泻 染 CSS 中 的 所 有 属性 。 你 应 
该 注意 这 种 差异 ， 并 在 不 同 的 浏览 器 和 设备 上 测试 你 的 网 站 ， 以 确保 它 能 够 如 你 所 希望 地 
那样 显示 出 来 。 
































图 4-1 中 显示 的 是 正常 的 Mozilla 网 站 ， 而 图 4-2 给 出 了 该 网 站 在 去 除了 所 有 CSS 后 的 显 
示 效 果 。 
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图 4-1: 正常 显示 的 Mozilla 网 站 
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图 4-2: 去 除了 所 有 CSS 后 的 Mozilla 网 站 
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浏览 器 前 级 

CSS3 的 部 分 规范 仍 在 由 W3C 制定 和 被 浏览 器 厂商 测试 。 因 此 ， 对 于 任何 新 的 样式 ， 最 终 
的 规范 可 能 与 浏览 器 目前 渲染 它 的 方式 会 稍微 有 所 不 同 。 

为 使 开发 者 脱离 进退 两 难 的 境地 (不 知道 新 的 CSS 属性 代码 在 特定 的 浏览 器 中 将 如 何 显 
示 )， 浏 览 器 支持 浏览 器 前 级 (browser prefix， 通 常 也 称 作 厂 商 前 级 ，vendor prefix), ， 使 开 
发 人 员 更 容易 控制 如 何 使 用 CSS 新 属性 。 











我 们 实际 上 并 不 需要 担心 浏览 器 的 差异 性 这 一 问题 ， 因 为 它们 大 多 数 都 是 采用 四 大 浏览 器 
泻 染 引 党 之 一 来 显示 网 页 的 。 要 演 染 一 个 页 面 ， 浏 览 器 需要 获取 所 有 的 内 容 (HTML 和 图 
像 ) 和 样式 (CSS) 以 及 可 能 的 JavaScript， 并 把 它们 组 合 在 一 起 来 决定 如 何在 屏幕 上 显示 
该 页 面 。 因 此 ， 所 有 使 用 相同 泻 染 引 敬 的 浏览 器 对 一 组 特定 的 代码 组 合 都 会 以 相同 的 方式 


显示 。 






































下 面 介绍 一 下 在 前 面 提 及 的 四 大 浑 染 引擎 

















e WebKit 泻 染 引擎 ， 为 苹果 公司 的 Safari 浏览 器 和 谷歌 公司 的 Chrome 浏览 器 所 用 ; 
e Mozilla 的 泻 染 引 敬 Gecko， 为 Firefox 浏览 器 所 用 ， 

。 微软 的 泻 染 引擎 Trident， 为 正 浏 览 器 所 用 ， 

* Opera 的 泻 染 引擎 Presto， 为 Opera 浏览 器 所 用 。 








对 于 仍 在 制定 中 的 样式 ， 每 个 浑 染 引擎 所 采用 的 谊 染 方 式 可 能 是 不 同 的 ， 每 个 泻 染 引擎 都 
会 有 自己 的 前 缀 化 CSS 属性 对 应 于 这 些 样式 ， 它 们 是 真正 的 属性 的 变 体 。 

例如 ， 连 字符 属性 hyphens 还 未 制定 完成 ， 所 以 它 在 四 个 浏览 器 泻 染 引 敬 中 都 有 变 体 ， 
而 你 需要 在 代码 中 列 出 每 一 种 变 体 : 





p { 
-webkit-hyphens: auto; 
-moz-hyphens: auto; 
-ms-hyphens: auto; 
-o-hyphens: auto; 
hyphens: auto; 


) 


这 5 条 声明 都 包含 一 个 不 同 的 属性 ， 最 后 的 声明 是 无 前 级 的 hyphens 属性 ， 这 个 属性 的 
规范 将 由 W3C 来 最 终 敲定 。 











前 4 条 声明 分 别 对 应 于 列 出 的 4 种 浏览 器 演 染 引擎 ， 你 可 以 通过 属性 名 的 开头 部 分 
(webkit, moz, ms W o) 来 判断 对 应 的 泻 染 引擎 。 需 要 注意 的 是 ， 所 有 的 前 缀 属性 都 以 
连 字 符 开 头 。 


在 这 个 例子 中 ， 如 果 WebKit fees | Sb (EDU iX hyphens 属性 ， 那 么 WebKit 核心 的 浏览 
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器 只 能 够 识别 -webkit-hyphens J&TEJETECRGX & P318], SIT ASRETUDUBS S fibt £c s e i 
无 前 级 属性 ， 它 们 则 会 将 其 忽略 掉 。 











那么 当 规范 被 最 终 确 定时 又 会 发 生 什 么 呢 ? 一 旦 WebKit 泻 染 引擎 实现 了 真正 的 hyphens 
属性 ， 那 么 至 少 在 短期 内 -webkit-hyphens 属性 仍 会 被 以 WebKit 为 核心 的 浏览 器 识别 。 
不 过 ， 因 为 无 前 级 hyphens 属性 是 定义 在 最 后 的 ， 且 它 现 在 是 有 效 的 属性 了 ， 所 以 它 会 
被 WebKit 浏览 器 识别 ， 并 覆盖 掉 定 义 在 前 面 的 -webkit-hyphens 属性 的 设置 。 




















大 多 数 时 候 ， 在 使 用 一 个 尚未 最 终 确 定 的 属性 时 ， 你 需要 包括 (所 有 的 ) 4 个 前 级 属性， 
如 前 例 所 示 。 











4 个 浏览 器 前 缀 属性 的 顺序 并 不 重要 。 许 多 人 喜欢 使 用 前 面 例子 中 的 顺序 ( 即 从 最 长 到 最 
短 )， 只 是 因为 这 样 在 样式 表 中 看 上 去 更 加 整齐 ， 但 无 前 级 属性 应 该 总 是 放 在 最 后 。 


你 会 发 现 ， 在 这 段 代码 中 我 把 每 条 声明 都 单独 放 在 一 行 中 ， 而 对 其 他 地 方 的 CSS 我 并 没有 
这 么 做 。 这 是 一 个 例外 ， 因 为 单独 的 行 能 够 让 你 更 容易 确保 包含 了 所 有 的 前 级 ， 并 能 一 眼 
看 到 每 个 属性 都 包含 相同 的 值 (尽管 在 某 些 情况 下 ， 某 些 前 级 属性 可 能 需要 使 用 不 同 
的 值 )。 


最 终 ， 你 将 不 再 使 用 每 种 属性 的 前 缀 版 本 ， 而 只 使 用 无 前 级 属性 〈 不 过 ， 总 是 会 有 更 多 仍 
将 需要 前 绥 的 新 属性 被 引入 ) 。 


















































CSS3 中 的 几 个 新 属性 已 经 得 到 部 分 或 全 部 主流 浏览 器 的 支持 。 在 你 的 CSS 中 保留 不 再 需 
要 的 前 级 属性 并 不 会 妨碍 页 面 的 泻 染 ， 因 为 我 们 把 非 前 级 属性 放 在 了 最 后 ， 它 会 覆盖 掉 前 
面 的 属性 。 当 然 了 ， 在 CSS 文件 中 保留 不 再 需要 的 前 级 属性 会 增加 一 些 不 必要 的 字 节 。 





























如 果 一 个 CSS3 属性 在 本 书 付 印 之 际 还 是 需要 前 级 的 ， 我 将 会 予以 说 明 ， 不 过 在 你 读 到 这 
里 的 时 候 ， 这 种 状况 可 能 已 经 发 生 了 改变 。 





访问 Can I Use 网 站 (http://caniuse.com/) 看 看 哪些 CSS 属性 被 哪些 版 本 的 浏览 器 支持 ， 以 
及 你 是 否 需 要 使 用 前 级 。 


4.3” 置 CSS 于 何 处 


样式 能 够 以 数 种 不 同 的 方式 应 用 到 你 的 网 页 ， 可 以 通过 单独 的 样式 表 文 件 来 应 用 ， 也 可 以 
直接 包含 在 网 页 代码 中 。 你 的 CSS 代码 放置 的 位 置 将 影响 到 它 如 何 应 用 于 页 面 。 




















4.8.4. ARER 
如 果 你 想 要 样式 仅 用 于 网 站 上 的 某 一 个 页 面 ， 可 以 通过 <style> 元 素 直接 将 它们 添加 到 
HTML 文件 的 <head> 元 素 中 。 只 需 将 一 条 或 多 条 CSS 规则 放置 到 <style> 元 素 里 ， 如 
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下 所 示 : 
<head> 
<style> 
p { color: blue; } 


</style> 


</head> 











不 过 通常 情况 下 ， 你 不 会 让 样式 只 应 用 于 一 个 页 面 ， 而 是 希望 将 它们 应 用 于 整个 网 站 。 即 
使 一 个 特定 的 样式 只 应 用 于 一 个 特定 的 页 面 ， 你 最 好 也 把 它 单独 放 在 一 个 样式 表 中 。 这 样 
所 有 的 样式 表 都 在 一 个 地 方 ， 很 容易 找到 ， 特 别 是 不 止 一 个 人 在 为 网 站 编写 代码 时 。 



































但 是 在 给 HTML 格式 的 电子 邮件 编写 代码 时 ， 你 则 应 该 使 用 身 入 式样 式 ， 因 为 邮件 客户 端 
通常 不 能 导入 外 部 样式 表 。 











4.3.2 ”样式 表 
一 般 来 说 ， 你 的 CSS 声明 将 被 集中 到 一 个 或 多 个 样式 表 文 件 中 ， 你 将 从 HTML 文件 中 链 
接 这 些 样式 表 。 使 用 样式 表意 味 着 整个 网 站 的 字体 、 颜 色 等 样式 和 布局 都 是 一 臻 的， 并 且 

个 样式 只 需 声 明 一 次 ， 就 能 应 用 到 网 站 的 所 有 页 面 。 



































TE 


«link» 元 素 人 允许 你 链接 文档 (文件 ) 到 你 的 HTML 页 
«link» TRUA HTML 文件 的 «head» WAH: 











M, EE CSS 和 JavaScript 文件 。 











«head» 
«link rel="stylesheet" href-"styles/mystyle.css"» 
«/head» 


任何 一 个 网 页 都 可 以 链接 多 个 样式 表 。 


此 外 ， 你 也 可 以 在 «head» 的 «style» 元 素 中 添加 一 条 eimport 规则 来 导入 样式 到 页 
HH: 




















<head> 

<style> 

@import url(styles/mystyle.css) 
</style> 


</head> 





就 浏览 器 获取 样式 而 言 ， 链 接 和 导入 样式 表 实 际 上 做 的 是 同样 的 事情 。 但 是 ， 如 何 选择 
却 可 能 对 网 站 的 性 能 产生 影响 ， 我 们 将 在 第 11 章 讨论 这 个 问题 。 一 般 来 说 ， 你 应 该 使 用 
«link» 元 素 并 尽 可 能 地 减少 你 的 样式 表 。 
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4.3.8 内 联 样式 


偶尔 你 可 能 想 要 直接 在 HTML 中 对 一 个 仅 出 现 一 次 的 元 素 应 用 样式 。 


要 做 到 这 一 点 ， 只 需 为 元 素 添加 一 个 style 属性 (style="…")， 在 引号 包 事 的 属性 值 中 
加 入 任何 你 想 要 的 样式 : 








«p style="color: green; font-size: 2em;"»This is a 
paragraph.«/p» 


你 应 该 避免 在 网 站 中 使 用 内 联 样式 ， 因 为 这 会 让 你 很 容易 忘记 你 的 CSS 都 定义 在 哪里 以 及 
它们 的 作用 ， 从 而 增加 网 站 的 维护 难度 。 不 过 ， 在 测试 页 面 样式 的 修改 效果 时 可 以 使 用 这 
种 方式 。 


44 RE 


如 有 果 你 已 经 能 尾 意 地 使 用 CSS T, ABA TR EIRIASAS BUE, EAE e 
一 遍 。 


























到 目前 为 止 ， 我 们 有 了 在 外 部 样式 表 中 的 样式 、<head> 元 素 中 的 伐 入 式样 式 以 及 内 联 样 
式 。 我 们 还 知道 ， 样 式 可 以 被 附加 到 元 素 、 类 和 ID 选择 嚣 中。 那么， 如 果 有 多 个 相互 冲 
突 的 样式 分 配给 同一 个 的 元 素 ， 浏 览 器 应 该 选择 哪 一 个 呢 ? 

CSS 对 于 以 何 种 顺序 来 应 用 样式 有 非常 详细 的 规则 ， 这 些 规 则 就 是 层 倒 样式 表 ( Cascading 
Style Sheet, CSS) 中 的 层 熏 。 层 倒 决 定 了 哪些 规则 优先 于 其 他 规则 。 

层 倒 可 能 很 难以 理解 ， 不 过 大 多 数 时 候 你 的 CSS 是 直截了当 的 ， 会 有 什么 效果 也 很 清楚 。 


我 会 以 一 个 略微 简化 的 版 本 来 讲解 层 琶 的 作用 方式 ， 但 是 如 果 你 要 编写 大 量 代码 ， 那 么 应 
该 做 更 加 深入 的 学 习 。 
















































































4.4.1 层 又 的 作用 方式 

每 个 HTML 元 素 都 有 若干 应 用 于 它 的 CSS 属性 。 例 如 ，<p> 元 素 的 CSS 属性 包括 文本 颜 
色 、 背 景 颜 色 、 字 体 大 小 、 字 体 选 择 ， 以 及 是 否 粗 体 、 和 斜体 、 有 边框 ， 是 否 有 边框 的 样 
式 ， 还 有 段落 在 页 面 的 位 置 ， 等 等 (有 十 几 种 之 多 )。 

当 浏 览 器 泻 染 网 页 时 ， 它 未 一 查看 每 个 元 素 并 通过 判别 这 些 属 性 的 值 来 决定 如 何 泻 染 该 元 素 。 
浏览 器 按照 一 套 非常 具体 的 程序 步骤 (一 种 层级 结构 ) 来 决定 将 哪些 样式 应 用 于 特定 的 元 
素 。 这 些 步 又 按 从 最 高 优先 级 到 较 低 优先 级 的 次 序 罗 列 如 下 : 


(1) 标注 为 重要 的 规则 ; 
(2) 内 联 样式 规则 ; 
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(3) 包含 ID 选择 器 的 规则 ; 

(4) 包含 类 、 属 性 和 伪 类 选择 器 的 规则 ; 
(5) 包含 元 素 和 伪 元 素 选择 器 的 规则 ; 
(6) 继承 的 规则 ; 

(7) 默认 值 。 


步骤 的 顺序 通常 称 为 CSS 特殊 性 (CSS specificity) ， 它 是 从 最 特殊 的 规则 〈 仅 应 用 于 一 个 
元 素 的 单个 或 几 个 实例 ) 一 直到 最 一 般 的 规则 (应 用 于 一 个 元 素 的 所 有 实例 )。 


对 于 页 面 上 的 每 个 元 素 ， 浏 览 器 将 按 顺 序 遍 历 这 个 层级 结构 ， 直 到 为 每 个 特定 的 属性 找到 
一 个 样式 为 止 。 例 如 ， 我 们 告诉 它 需 要 知道 一 个 段落 的 文本 颜色 (color)。 它 将 首先 寻找 
标注 为 重要 的 规则 ， 然 后 是 内 联 样式 、 包 含 ID 选择 器 的 规则 ， 以 此 类 推 ， 直 到 它 找 出 所 
有 用 于 段落 的 颜色 值 ， 然 后 再 根据 层 和 的 规则 来 决定 哪个 属性 值 优 先 。 






























































4.4.2 poi 

如 果 你 希望 一 条 特定 的 规则 必须 生效 ， 可 以 使 用 important 来 标注 它 。 在 你 的 常规 样式 
或 内 联 样式 中 都 可 以 用 它 。 在 继续 下 一 条 规则 之 前 ， 浏 览 器 会 首先 在 本 条 规则 中 查找 是 否 
存在 !important 标记 。 

















在 下 面 的 例子 中 ，color 属性 被 标注 为 !important， 而 font-weight 属性 则 没 
有 。!important 标记 放 在 分 号 之 前 ， 只 对 一 条 声明 而 不 是 整 组 声明 有 效 : 





p { font-weight: bold; color: blue !important; ) 





这 样 该 段落 将 显示 蓝 色 的 文字 ， 而 不 管 是 否 在 其 他 声明 中 对 段落 应 用 了 别 的 颜色 。 


尽管 !important 看 上 去 是 一 个 有 用 的 工具 ， 但 你 应 该 仅 在 用 类 、ID 或 其 他 选择 器 完 
没 办 法 来 达成 你 的 目的 时 才 使 用 它 。 因 为 一 旦 应 用 了 !important， 你 的 规则 将 是 最 高 优 
先 级 的 ， 也 就 不 再 有 办 法 覆盖 它 了 。 


4.4.3 ”内 联 样式 

如 果 浏 览 器 没有 找到 任何 标注 为 !important 的 规则 来 设置 颜色 ， 接 下 来 就 会 搜寻 内 联 样 
式 。 这 些 样式 是 直接 附加 于 你 HTML 文档 里 的 元 素 中 的 。 内 联 样式 优先 于 其 他 存在 于 外 部 
样式 表 中 或 陪 入 于 文档 «head» 元 素 中 的 样式 : 












































«p style="color: blue;"»Paragraph text.</p> 


4.4.4 1D 选 择 器 
如 果 没 有 内 联 样式 ， 浏 览 器 将 寻找 是 否 有 直接 的 ID 选择 器 (或 者 间接 通过 一 个 后 代 选 择 
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器 ) 应 用 于 该 元 素 : 
«p id="example">Paragraph text.</p> 


#example { color: blue; } 


4.4.5 类 、 属 性 和 伪 类 选择 器 
如 果 没 有 匹配 的 ID 选择 器 ， 浏 览 器 接着 将 寻找 是 否 有 类 、 属 性 和 伪 类 选择 器 可 以 应 用 样 
式 于 该 元 素 。 同 样 ， 它 可 以 包含 在 一 个 后 代 选 择 器 中 : 














.example { color: blue; ) 
.example p { color: green; } 


4.446 ”元 素 与 伪 元 素 选 择 器 
如 果 没 有 类 、 属 性 或 者 伪 类 选择 器 应 用 样式 于 颜色 ， 浏 览 器 会 接着 寻找 包含 在 元 素 或 伪 元 
素 选 择 器 中 的 样式 : 








<p>Paragraph text.</p> 


p { color: blue; } 


4.4.7 ”继承 规则 
到 了 这 一 步 ， 如 果 浏 览 器 仍 未 发 现 有 样式 可 以 直接 应 用 颜色 于 我 们 的 <p> 元 素 ， 它 就 会 寻 
找 是 否 有 继承 的 样式 可 用 。 


继承 非常 简单 ， 也 就 是 指 如 果 一 个 元 素 没 有 样式 应 用 于 它 ， 它 将 继承 其 父 元 素 的 样式 : 





























<p>This is a paragraph with <strong>bold text</strong>. 
</p> 


p { color: blue; } 














因为 我 们 没有 给 <strong> 元 素 分 配 一 个 颜色 值 ， 它 将 从 其 父 元 素 ， 即 «p» 元 素 中 继承 颜 
EE. <p> 元 素 的 颜色 值 被 设置 为 蓝 色 ， 因 此 <strong> 元 素 的 颜色 也 将 是 蓝 色 。 





不 是 每 个 属性 都 能 被 继承 的 ， 但 什么 属性 可 被 继承 通常 是 显而易见 的 。 例 如 ， 字 体 大 小 是 
可 被 继承 的 ， 因 为 一 旦 你 为 <p> 元 素 设置 了 字体 大 小 ， 肯 定 是 想 要 «p» 元 素 中 的 所 有 内 
容 都 是 相同 的 大 小 ， 即 使 是 在 «strong» 或 «em» 元 素 中 的 内 容 。 


























但 是 ， 边 框 是 不 能 被 继承 的 。 如 果 给 «div» 元 素 设置 了 边框 ， 你 并 不 会 想 要 或 希望 <div> 
元 素 中 的 每 个 段落 也 都 有 自己 的 边框 。 
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4.4.8 默认 值 


如 果 到 现在 还 没有 找到 一 个 适用 于 «p» 元 素 的 颜色 ， 不 用 担心 ， 每 一 个 元 素 都 有 默认 值 。 


对 于 大 多 数 属性 ， 黑 认 值 是 CSS 规范 的 一 部 分 。 例 如 ， 任 何 文 本 元 素 的 默认 颜色 都 是 轴 
色 。 如 果 你 不 指定 颜色 ， 浏 览 器 将 使 用 默认 的 黑色 。 


所 以 ， 如 果真 的 没有 任何 样式 应 用 文本 颜色 于 我 们 的 <p> 元 素 ， 那 文本 颜色 将 是 黑色 。 


4.4.9 发 生 冲 突 怎 么 办 
我 们 还 需要 再 多 做 一 点 解释 。 
在 CSS 规则 的 层级 结构 之 外 ， 浏 览 器 还 会 特别 查看 一 条 规则 包含 的 选择 器 数量 。 更 多 的 数 


量 等 于 更 高 的 优先 级 〈 例 如 ， 一 条 有 具有 两 个 ID 选择 器 的 规则 优先 于 只 有 一 个 ID 选择 器 的 
规则 ) 。 




















isl 
































如 果 两 条 规则 仍然 是 平 级 的 ， 浏 览 器 不 知道 该 选择 哪 一 个 ， 这 个 时 候 就 会 选择 所 有 样式 按 
顺序 (从 第 一 个 样式 表 直至 最 后 一 个 样式 表 ) 排列 在 一 起 时 后 出 现 的 那 条 规则 。 


你 在 这 里 读 到 的 是 一 个 概要 性 的 介绍 ， 差 不 多 涵盖 了 所 有 你 需要 了 解 的 知识 。 但 是 如 果 
你 想 对 CSS 特殊 性 这 一 或 者 用 它 结合 CSS 来 做 更 酷 的 事情 ， 请 参考 
Vitaly Friedman 发 表 在 Smashing Magazine 上 的 文章 “CSS Specificity: Things You Should 
Know" (http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should- 
know/) 。 


4.5 FHES 

所 有 的 这 些 规则 可 能 看 上 去 令 人 十 分 困惑 ， 但 实际 上 却 很 简单 ， 因 为 是 你 来 决定 如 何 应 用 
当 你 向 页 面 添加 样式 时 ， D s EN T 页 序 添 加 。 你 总 是 希 
望 样式 能 应 运 于 尽 可 能 广 的 范围 ， 所 以 很 少 会 遇 到 那些 特殊 的 情 ; 


例如 ， 你 不 可 能 为 页 面 上 的 段落 设置 数 十 种 文本 颜色 ， 以 至 于 要 去 梳理 众多 相互 冲突 的 样 
式 规则 。 你 可 能 只 有 一 两 条 规则 ， 并 且 知 道 如 何 准确 地 应 用 它们 。 下 面 是 你 在 定义 CSS 时 
应 该 遵循 的 顺序 : 



























































(1) 默认 值 ; 
(2) 继承 的 规则 ， 
(3) 包含 元 素 与 伪 元 素 选 择 器 的 规则 ， 








(4) 包含 类 、 属 性 和 伪 类 选择 器 的 规则 ，; 
(5) 包含 ID 选择 器 的 规则 ， 

(6) 内 联 样 式 规则 ， 

(7) 标注 为 ! important 的 规则 。 


4.5.1 默认 值 和 重 置 
首先 讲解 默认 值 。 对 于 大 多 数 CSS 属性 来 说 ， 默 认 值 是 显而易见 的 。 以 我 们 在 第 3 章 中 所 
用 到 的 HTML 页 面 为 例 ， 在 我 们 没有 应 用 任何 样式 的 情况 下 ， 文 本 颜色 是 黑色 ， 标 题 文本 
大 于 段落 文本 ， 任 何 元 素 都 没有 边框 。 这 些 用 的 都 是 默认 值 。 

不 过 ， 浏 览 器 使 用 的 默认 值 可 能 会 与 我 们 的 预期 有 冲突 ， 所 以 为 了 确保 我 们 的 初始 环境 相 
同 而 不 管 使 用 什么 浏览 器 ,我 们 将 一 些 属性 值 重 置 为 零 。 否 则 哪怕 只 有 个 别 默 认 值 不 对 ， 
都 可 能 影响 到 我 们 的 设计 ， 使 得 网 站 在 不 同 的 浏览 器 中 有 不 同 的 显示 效果 。 









































mH 

EE CSS 需要 我 们 将 所 有 元 素 的 内 、 外 边 距 都 设置 为 零 ， 并 设置 某 些 字体 属性 为 标准 的 
基本 字体 大 小 。 重 置 完 后 ， 我 们 再 添加 样式 去 设置 我 们 想 要 设置 的 属性 。 重 置 所 有 属性 的 
CSS 代码 通常 称 为 CSS 重 置 或 样式 表 重 置 。 

















举 个 例子 ， 如 果 我 们 在 “永远 的 大 熊猫 ”网 站 使 用 CSS 重 置 ， 得 到 的 显示 效果 如 图 4-3 所 示 。 









s in Wolong 
The Wolong National Nature Preserve, in the Sichuan Province of China, is home to more than 150 giant pandas. It's one of the key sites for panda breeding research, and 66 cubs have been born at 
lolong since it was established in 1980. Pandas are an endangered species, with between 1500 and 3000 living in the wild, and less than 300 in captivity (research centers and z008). 








图 4-3: 我 们 的 示例 页 面 ， 所 有 的 样式 被 重 置 
还 是 以 前 的 好 看 ， 对 吧 ? 不 过 别 担心 ， 我 们 将 一 点 点 修正 它 。 


找 出 你 的 CSS 中 所 使 用 的 所 有 元 素 ， 然 后 编写 样式 声明 来 重 置 它 们 ， 这 可 不 是 一 件 轻松 的 
事 。 地 运 的 是 ， 已 经 有 人 为 我 们 做 好 了 这 件 事 ， 他 们 创建 的 CSS 代码 块 包含 了 你 需要 重 置 
的 所 有 样式 ， 你 可 以 简单 地 复制 并 粘贴 到 样式 表 中 。 





T 














一 个 最 受 欢迎 的 CSS 重 置 方案 是 Eric Meyer WJ "Reset CSS” (http;//meyerweb.conyeric/ 
tools/css/reset/)。 它 不 受 版 权限 制 ， 因 此 你 可 以 随意 地 使 用 与 修改 它 。 








另 一 个 可 选 方案 是 出 自 Nicolas Gallagher 的 “Normalize.css”(http://necolas.github.com/ 


normalize.css/) 。 
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你 还 可 以 创建 自己 的 重 置 方案 ， 详 情 请 见 Jeffrey Way TE Nettuts+ 上 撰写 的 “Quick Tip: 
Create Your Own Simple Reset.css File” (http://net.tutsplus.com/tutorials/html-css-techniques/ 


weekend-quick-tip-create-your-own-resetcss-file/) 。 














为 确保 CSS 重 置 不 会 覆盖 你 的 其 他 样式 ， 它 必须 最 先 被 浏览 器 泻 染 。 所 以 它 应 该 是 你 的 
«head» 元 素 中 链接 的 第 一 个 CSS 文件 ， 如 果 你 没 将 它 单独 放 在 一 个 文件 中 ， 那 就 应 该 放 
在 你 的 第 一 个 CSS 文件 的 开头 处 。 














4.5.2. ”继承 规则 
下 一 步 我 们 要 看 的 是 继承 规则 。 你 的 网 站 上 的 大 多 数 样式 都 会 被 继承 。 
因此 ， 如 果 你 设置 <body> 元 素 的 文本 颜色 是 粉红 色 ， 那 么 网 站 上 的 所 有 文本 都 将 是 粉红 


色 的 。 你 无 需 费 心 去 设置 段落 、 列 表 、<div> 等 元 素 的 文本 颜色 ， 除 非 你 希望 它们 显示 粉 
红色 之 外 的 颜色 : 


body { color: pink; } 
但 有 一 个 例外 ， 链 接 元 素 (<a>) 不 会 继承 颜色 设置 ， 默认 情况 下 它们 是 蓝 色 的 (访问 过 
的 链接 是 紫色 的 )， 这 样 它们 在 页 面 上 有 不 同 的 视觉 效果 。 你 可 以 保留 它们 为 蓝 色 /紫色 ， 
或 者 通过 «a» 元 素 给 它们 分 配 不 同 的 颜色 。 
另外 ， 不 要 添加 多 余 的 样式 声明 。 如 果 设 置 <body> 元 素 的 文本 颜色 为 粉红 色 ， 那 就 不 用 


再 添加 一 条 规则 使 所 有 <p> 元 素 的 文本 颜色 也 是 粉红 色 。 因 为 它们 会 继承 粉红 色 的 设置 ， 
你 不 需要 再 添加 额外 的 代码 。 



































4.5.3 ”元素 规则 
应 用 样式 首先 要 从 最 大 的 范围 开始 。 例 如 ， 如 果 你 想 要 所 有 文本 都 使 用 Helvetica 字体 ， 那 
么 应 该 对 «body» 元 素 应 用 这 个 样式 规则 ， 这 样 页 面 上 的 所 有 其 他 元 素 都 会 继承 这 个 设置 。 


如 果 你 想 要 所 有 的 一 级 标题 使 用 Georgia 字体 ， 那 就 应 用 该 样式 于 «hi» 元 素 ， 这 样 你 的 
所 有 一 级 标题 将 使 用 Georgia 字体 ， 其 他 元 素 则 仍 是 Helvetica 字体 。 




















不 管 你 要 应 用 什么 样式 ， 试 着 找 出 它 可 以 应 用 的 最 高 层级 的 元 素 。 


在 我 们 的 网 站 中 ， 我 们 要 改变 标题 的 文本 大 小 ， 使 它 比 页 面 上 的 其 他 文本 要 大 ， 然 后 
加 粗 : 

















hl ( font-size: 2em; } 

h2 ( font-size: 1.3em; ) 

h1, h2 ( font-weight: bold; } 
p, ul ( font-size: lem; } 
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em 是 一 个 相对 单位 ，2 em 意味 着 «h1» 元 素 的 文本 将 是 基本 字体 大 小 《网 站 上 所 有 其 他 
文本 的 字体 大 小 ) 的 两 倍 。 我 们 将 在 4.8.1 市 更 详细 地 讨论 它 。 
虽然 段落 和 列表 会 是 默认 的 字体 大 小 ， 但 我 们 还 是 将 它们 包含 在 CSS 中 以 免 发 生 冲 突 ， 因 
此 我 们 给 它们 设置 的 值 是 1em, 








4.5.4 其 他 规则 


如 果 某 一 元 素 的 样式 需要 特别 设置 ， 有 别 于 该 元 素 的 其 他 实例 ， 你 可 以 使 用 以 下 几 种 方 
式 。 例 如 ， 如 果 你 想 要 <nav> 元 素 中 的 链接 字体 变 大 ， 可 以 这 样 : 

















nav li { font-size: 1.5em; } 


网 站 上 所 有 其 他 的 «1i» 元 素 仍 是 继承 的 字体 大 小 〈 除 了 «nav» 元 素 中 的 <li> 7038). Mi 
以 你 会 看 到 在 图 4-4 F, “Related Links”( 相 关 链 接 ) 部 分 中 链接 的 字体 大 小 并 没有 改变 。 












in Woloag 
The Wolong National Nature Preserve, in the Sichuan Province of China, is bome to more than 150 nee It's one of the key sites for panda breeding research, a Sa osons Ira opn bom at 
long since it was established in 1980. Pundas are an endangered species, with between 1500 and the wild, and less than 300 in captivity (research centers and 2005) 
lated Links 








图 4-4: 导航 中 的 列表 项 字体 尺寸 变 大 ， 但 其 他 列表 项 字体 尺寸 保持 不 变 
我 们 应 像 前 面 的 例子 那样 优先 使 用 后 代 选 择 器 ， 然 后 再 考虑 为 元 素 添 加 类 属性 并 通过 类 选 
择 器 将 它们 与 其 他 元 素 区 分 开 。 


但 是 除非 你 真 的 需要 它们 ， 否 则 不 要 使 用 后 代 选 择 器 和 类 选择 器 。 在 上 面 的 例子 中 ， 因 为 
链接 实际 上 是 «nav» 中 唯一 的 文本 ， 我 们 可 以 直接 应 用 样式 于 «nav» 元 素 而 无 需 使 用 后 
代 选 择 器 。 下 面 的 代码 具有 同样 的 效果 : 


















































nav ( font-size: 1.5em; } 





层 登 规则 中 最 特殊 的 是 ID 选择 器 、 内 联 样式 和 !important， 你 应 该 避免 使 用 它们 ， 除 
非 你 真 的 知道 自己 在 做 什么 。 


4.5.5 ”保持 简单 
你 可 能 想 知道 为 什么 需要 保持 CSS 尽 可 能 得 简单 。 为 什么 不 加 入 类 选择 器 和 !importants， 
即使 他 们 能 实现 目标 ? 


原因 是 ， 对 于 任何 网 站 ， 你 几乎 肯定 会 在 后 来 修改 CSS， 不 管 是 细微 地 调整 还 是 彻底 地 重 
写 。 最 初 的 CSS 越 简单 ， 就 越 容易 进行 修改 ， 尤 其 是 进行 修改 的 人 并 非 原 开发 者 时 。 
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而 且 正如 我 之 前 提 到 的 ， 本 书 只 是 告诉 你 非常 基本 的 CSS 工作 方式 ， 实 际 编程 往往 要 复杂 
得 多 。 


如 果 网 页 上 显示 的 某 些 内 容 与 预期 有 出 入 ， 可 能 问题 出 在 层 倒 这 染 的 样式 上 。 请 测试 并 修 
改 这 些 样式 ， 直 到 你 弄 明 白 发 生 了 什么 。 学 习 事 物 工作 方式 的 最 简单 办 法 就 是 尝试 不 同 的 
变化 然后 看 看 发 生 了 什么 。 


你 需要 在 不 同 的 浏览 器 和 设备 上 测试 你 的 网 站 ， 以 保证 所 有 训 览 器 和 设备 应 用 的 CSS 有 着 
相同 效果 。 我 们 将 在 第 8 章 中 讨论 如 何 测 试 。 

4.6 注释 

与 HTML 一 样 ， 你 也 可 以 对 CSS 文件 添加 注释 ， 不 过 它们 所 使 用 的 注释 符号 不 同 。 
浏览 器 会 忽略 掉 注 释 中 的 一 切 内 容 。 


在 样式 表 中 使 用 注释 ， 通常 的 方式 是 提供 一 个 描述 性 或 解释 性 的 内 容 ， 比 如 什么 是 干什么 
用 的 ， 或 对 修改 内 容 做 个 记录 : 


























/* 这 是 一 个 css 注释 */ 





/* 它们 可 以 是 一 行 或 多 行 ， 
也 可 以 与 你 的 样式 代码 在 同一 行 */ hi ( color: #7b0000; ] 


4.7 组织 你 的 样式 表 
除非 样式 需要 以 特定 的 顺序 来 应 用 ， 否 则 样式 表 中 的 样式 几乎 可 以 是 任意 顺序 的 。 但 最 好 
还 是 以 系统 的 方式 组 织 它 们 ， 这 样 在 以 后 也 能 更 容易 地 检索 。 一 旦 你 开始 添加 媒体 查询 进 
来 ， 就 需要 知道 所 有 的 样式 都 在 什么 地 方 。 
我 们 首先 要 重 置 CSS。 这 可 以 是 单个 重 置 文件 ， 也 可 以 是 你 主 样式 表 中 最 开始 的 几 行 代码 。 
有 些 人 喜欢 按 页 面 或 站 点 区 块 来 编排 自己 的 样式 表 ， 并 用 注释 标注 出 样式 表 的 每 一 部 分 。 
你 可 以 用 破 折 号 或 其 他 符号 在 注释 中 画 “ 线 ”以 区 分 样式 表 中 的 各 个 部 分 ， 这 样 更 容易 找 
到 特定 的 代码 : 

/* 主要 内 容 ----------------------------- */ 




















styles for typography, layout, etc. in main content 





/* WUB ----------------------------- */ 

















styles for typography, layout, etc. in header 





m ---------7------ */ 


styles for typography, layout, etc. in footer 
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其 他 人 喜欢 把 类 似 的 样式 放 在 一 起 ， 不 管 它们 所 处 的 位 置 或 区 块 ， 比 如 : 
"o 1 E */ 
Bd end 


header p ( ... ] 
footer p ( ... ] 
.classname p ( ... } 





l5 ozeed 
footer li ( ... ] 
.classname li ( ... } 


/* 布局 ------------------------ */ 


header ( ... ] 
footer { .... ) 





你 可 以 通过 浏览 器 查看 任何 一 个 网 站 的 HTML 和 CSS 文件 ， 看 看 在 这 些 网 站 的 CSS 文件 
中 ， 样 式 是 如 何 组 织 安排 的 。 并 不 存在 唯一 正确 的 组 织 方 法 ， 但 在 网 站 中 你 应 该 保持 组 织 
方法 的 一 致 性 。 


4.8 A 
CSS 布局 中 最 重要 的 概念 是 “ 盒 模 型 ”。 也 就 是 说 ， 页 面 上 的 每 一 个 HTML 元 素 都 是 一 个 
和 矩形 盒子 ， 每 个 盒子 都 可 能 有 (或 没有 ) 边框 、 内 边 距 (盒子 边界 内 的 空白 ) 和 外 边 距 
(盒子 边界 外 的 空白 ) 。 





























如 图 4-5 所 示 ， 位 于 元 素 盒子 正中 的 是 内 容 ， 它 可 以 是 文字 、 图 像 或 子 元 素 〈 比 如 <div> 
元 素 中 的 段落 元 素 )。 元 素 被 内 边 距 环绕 ， 接 着 是 边框 ， 最 后 是 外 边 距 ， 它 们 的 宽度 和 高 
度 都 可 以 设置 成 零 (宽度 和 高 度 值 都 为 零 的 边框 将 是 不 可 见 的 )。 


gat mh ned ieee E et at ht nt nok ri er he ee enh nn ett E | 














HI 


mi 


图 4-5. 元 素 四 周 被 内 边 距 、 边 框 和 外 边 距 包围 
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4.8.4 度量 单位 









































元 素 的 高 度 、 宽 度 、 内 边 距 、 外 边 距 和 边框 可 以 使 用 任何 一 种 度量 单位 进行 设置 。 
习惯 上 ， 我 们 使 用 绝对 度量 单位 ， 以 保证 一 个 元 素 在 屏幕 上 的 精确 位 置 。 在 响应 式 设计 
中 ， 我 们 通常 使 用 相对 度量 单位 ， 这 样 每 个 元 素 都 可 以 对 视 口 的 大 小 做 出 响应 。 
下 面 是 最 常见 的 相对 度量 单位 。 

表示 包含 元 素 的 百分比 。 
e em 

表示 元 素 的 字体 大 小 。 
e rem 


表示 文档 的 字体 大 小 〈 即 html 元 素 ) 。 





下 面 这 








六 些 是 最 常见 的 绝对 度量 单位 。 





e px 


像素 是 一 个 绝对 度量 单位 ， 但 在 不 同 设备 上 它们 不 一 定 是 一 致 的 。 


e in, 

















cm 和 mm 

















映射 到 像素 的 物理 度量 单位 ， 但 在 不 同 设备 上 也 不 一 定 相 同 。 一 英寸 是 96 xs. — D 
米 是 37.8 像素 ， 一 毫米 是 3.78 像素 。 























e. pt 
一 磅 等 于 一 英寸 的 172， 它 在 印刷 设计 中 更 为 常见 。 在 网 站 中 它们 可 以 用 于 生成 一 个 打 
印 样式 表 。 

4.8.2 em 

在 响应 式 设计 中 你 会 大 量 将 em 用 作 度量 单位 。 





在 传统 的 金属 印刷 排版 中 ，em 是 指 包含 一 个 浮雕 字母 的 金属 板 的 尺寸 ， 它 的 宽度 必须 能 





JM 


ATE 


宽 的 字母 一 一 大 写 的 M。 


许多 人 认为 在 数字 世界 中 em 也 是 基于 字母 M 的 宽度 ， 其 实 不 是 。 在 数字 世界 中 ，em 就 


等 于 元 





素 的 字体 大 小 ， 不 会 随 所 选择 的 字体 而 改变 ， 如 图 4-6 所 示 。 





图 4-6: 高 度 和 宽度 正好 都 是 1 em 的 盒子 


4.8.3 ”高 度 与 宽度 


在 盒 模型 中 ， 每 个 元 素 都 有 一 个 高 度 和 宽度 属性 ， 某 些 时 候 我 们 可 以 用 CSS 改变 它们 。 











行内 元 素 有 一 个 继承 的 高 度 和 宽度 ， 不 能 被 覆盖 。 在 默认 情况 下 ， 一 个 行内 元 素 的 宽度 和 
高 度 只 是 恰好 能 容 下 其 所 要 显示 的 内 容 ， 如 图 4-7 所 示 。 











wide and tall as it needs to be. 
图 4-7: 行内 元 素 宽度 和 高 度 只 是 恰好 能 容 下 其 所 要 显示 的 内 容 
块 级 元 素 默认 情况 下 具有 包含 它 的 元 素 的 100% 的 宽度 ， 即 使 内 容 没 有 填 满 空间 。 


DD e ou abra ER E ae 例如 ， 一 个 段落 元 素 的 高 度 必 须 能 够 包 
它 所 有 的 文本 ， 即 使 自动 换行 成 多 行文 本 ， 如 图 4-8 所 示 。 














A paragraph is as wide as its containing : 
‘element, and is tall as it needs to be. 


图 4-8: 块 级 元 素 默认 情况 下 与 它们 的 包含 元 素 一样 帘 ， 高 度 则 是 包含 的 内 容 所 需要 的 高 度 
你 可 以 用 CSS 改变 块 级 元 素 的 宽度 或 高 度 : 
div ( width: 75$; height: 200px; } 


记 住 ， 一 个 百分比 宽度 是 基于 包含 元 素 的 宽度 ， 所 以 ， 在 上 面 的 代码 中 ，<qiv> 的 宽度 将 
是 其 包含 元 素 宽度 的 7596, 
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4.8.4 ”外 边 距 与 内 边 距 
每 个 元 素 都 有 外 边 距 ， 规 定 了 页 面 布局 中 元 素 外 围 的 空白 区 域 。 每 个 元 素 也 有 内 边 距 ， 规 
定 了 元 素 内 部 环绕 内 容 的 空白 区 域 。 内 、 外 边 距 所 产生 的 效果 通常 是 类 似 的 ， 除 非 元 素 有 
边框 (边框 位 于 内 、 外 边 距 之 间 )。 
































浏览 器 对 于 每 个 元 素 都 有 一 个 默认 的 内 、 外 边 距 ， 但 浏览 器 与 浏览 器 之 间 ， 这 个 默认 值 并 不 
总 是 一 致 。 这 就 是 早先 时 候 我 们 为 什么 要 使 用 CSS 重 置 来 设置 每 个 元 素 的 内 、 外 边 距 为 零 。 
这 样 ， 你 就 不 用 担心 在 不 同 的 浏览 器 中 有 不 同 内 、 外 边 距 值 ， 使 得 布局 与 你 的 预期 相符 。 

一 般 来 说 ， 在 响应 式 设计 中 ， 你 将 使 用 百分比 设置 元 素 的 水 平 ( 左 / 右 ) 内 边 距 和 外 边 距 ， 


这 样 布局 才 可 以 对 视 口 的 大 小 做 出 响应 。 在 大 屏幕 上 ， 你 有 足够 的 空间 在 内 容 四 周 设置 内 
外 边 距 。 但 是 在 小 屏幕 上 ， 你 肯定 不 想 因 为 巨大 的 边 距 而 浪费 宝贵 的 屏幕 空间 。 





EE (E/F) 内 边 距 和 外 边 距 可 以 用 像素 来 设置 ， 因 为 它们 不 需要 响应 视 口 的 大 小 。 
元 素 的 4 个 边 都 可 以 有 不 同 的 内 、 外 边 距 值 。 








下 面 的 例子 分 别 设置 元 素 四 边 的 边 距 。 按 顺 时 针 方 向 ,， 分别 是 上 、 右 、 下 、 左 四 个 方向 
( 记 住 这 个 顺序 的 简便 方法 是 用 助 记 符号 TRBL 或 trouble 来 记 ) : 
div { 
padding: 1px 2px 3px 4px; 
margin: 1px 2px 3px 4px; 





) 


在 这 个 例子 中 ， 上 边 的 内 、 外 边 距 是 1 个 像素 ， 右 边 是 2 个 像素 ， 下 边 是 3 个 像素 ， 左 边 
是 4 个 像素 。 


如 果 相 对 两 边 的 边 距 或 所 有 四 边 的 边 距 的 值 是 相同 的 ， 可 以 合并 它们 。 


你 仍然 可 以 使 用 同一 助 记 符 号 TRBL， 缺 少 的 值 将 从 相对 的 那 边 复 制 。 所 以 在 下 面 的 例子 
中 ， 上 边 距 为 1 个 像素 ， 右 边 距 为 2 个 像素 ， 下 边 距 复制 上 边 距 的 值 ， 一 样 是 1 个 像素 ， 
左边 距 和 右边 距 也 一 样 (2 像素 ) : 
div ( 
padding: 1px 2px; 
margin: 1px 2px; 








) 


如 果 有 三 个 数值 ， 仍 遵循 这 个 逻辑 。 如 果 你 给 出 了 上 、 右 、 下 边 距 的 值 ， 而 缺少 的 左边 距 
的 值 将 复制 它 相 对 的 右边 距 的 值 (2 像素 ) : 
div { 
padding: 1px 2px 3px; 
margin: 1px 2px 3px; 








Rd 




















) 
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如 有 果 只 给 出 了 一 个 数值 ， 它 将 用 于 盒子 四 个 边 的 所 有 边 距 : 


div { 
padding: 1px; 
margin: 1px; 


) 


你 也 可 以 单独 地 设置 一 边 ， 例 如 ， 如 果 你 已 经 设置 了 所 有 段落 的 外 边 距 ， 但 对 一 个 特殊 的 
段落 想 要 覆盖 掉 上 边 的 外 边 距 值 : 





p { margin: 5px 10$; } 
.other p { margin-top: 10px; } 


RAJ LIH padding-top, padding-right, padding-bottom, padding-left, margin- 





top, margin-right, margin-bottom f} margin-left 单独 设置 任意 一 边 。 当 然 , 如 果 这 
些 属性 被 应 用 到 同一 个 元 素 ， 你 应 该 将 它们 合成 为 一 个 声明 ， 如 前 所 述 。 


如 果 你 想 要 一 个 块 级 元 素 在 其 包含 元 素 内 居中 ， 你 可 以 通过 设置 元 素 的 左 、 右 外 边 距 值 为 
auto 来 实现 这 个 效果 。 这 将 使 元 素 保持 在 其 容器 元 素 的 中 间 位 置 ， 留 出 的 空间 将 由 左 、 厂 
外 边 距 平分 ， 从 而 有 效 地 让 元 素 居 中 ， 如 图 4-9 所 示 。 




















This i is a paragraph with a ' 
fixed width, and left and right ' 
margins set to auto So it's 
centered. 


49: 设置 一 个 块 级 元 素 的 左 、 右 外 边 距 为 auto 将 使 其 在 包含 它 的 元 素 内 居中 


这 个 视觉 效果 仅 在 你 要 居中 的 元 素 的 宽度 小 于 100% 时 可 见 ， 否 则 ， 它 只 是 填 满 整个 空间 
罢了 。 




















4.8.5 边框 

边框 位 于 内 、 外 边 距 之 间 ， 为 元 素 提 供 一 个 轮廓 。 

在 声明 一 个 边框 时 ， 你 需要 指定 边框 线 的 宽度 、 样 式 和 颜色 。 
边框 宽度 通常 以 像素 为 单位 声明 。 














边框 样式 值 (border-style) Aff solid, dotted, dashed, double ( 双 线 ) groove, 
ridge, inset 和 outset (后 4 个 代表 不 同 的 方向 3D 边框 )。 你 可 以 参考 图 4-10 的 示例 。 
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Cien pui 
| inset outset | 


& 4-10: 边框 样式 选项 


页 





你 可 以 以 任意 顺序 在 一 个 声明 中 定义 所 有 的 边框 值 。 下 面 的 代码 设置 
元 素 的 边框 宽度 为 1 像素 ， 样 式 为 实 线 ， 颜 色 为 红色 : 





div { border: 











lpx solid red; } 





你 也 可 以 对 这 三 个 属性 进行 单独 地 设置 : 








div { border-width: 2px; } 
div { border-style: dotted; } 
div { border-color: green; } 


你 也 可 以 单独 地 设置 元 素 的 每 一 条 边 : 


div ( border-left-width: 2em; ) 
div ( border-right-style: inset; } 
div { border-top-color: blue; } 


诸如 此 类 ， 上 、 下 、 


左 、 右 四 条 边 的 这 三 个 属性 都 可 以 设置 。 


4.8.0 盒子 大 小 











现在 你 已 经 学 会 了 如 何 设置 盒子 的 各 种 属性 ， 不 过 ， 你 需要 知道 ， 在 网 页 上 计算 盒子 的 大 





小 是 件 有 点 复杂 的 事 。 内 边 距 、 边 框 和 外 边 距 是 否 被 作为 元 素 宽 度 、 高 度 的 一 部 分 计算 在 


内 ， 这 要 视 情 况 而 定 。 


实际 上 有 两 个 不 同 的 方法 来 告诉 浏览 器 如 何 计算 。CSS3 中 的 新 属性 box-sizing， 人 允许 
你 在 border-box (WHER) 或 者 是 content -pox (内 容 盒 ) 这 两 种 方法 之 间 选 择 其 一 。 


对 于 border-box, 


一 旦 你 设置 了 你 的 块 级 元 素 的 宽度 ， 你 对 内 边 距 和 边框 所 设置 的 宽度 


值 都 将 计算 在 这 个 宽度 内 。 相 反 ， 使 用 默认 的 content -box， 内 边 距 和 边框 的 宽度 值 都 
不 计算 在 盒子 的 宽度 中 。 


border-box 通常 更 容易 使 用 ， 但 它 却 不 是 默认 值 。 所 以 要 使 用 它 ， 你 需要 设置 元 素 为 





box-sizing: bor 





der-box, 





这 个 属性 并 不 完全 被 所 有 浏览 器 支持 ， 所 以 你 必须 使 用 厂商 前 弘 。IE8+ 和 Opera 已 经 支持 
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这 个 属性 ， 所 以 你 只 需要 针对 WebKit 和 Mozilla 使 用 前 级 属性 : 
div ( 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 








box-sizing: border-box; 


) 
你 可 能 想 要 将 border-box 应 用 于 你 的 整个 网 站 。 实 现 此 的 代码 是 : 


*, *:before, *:after { 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 


} 
星 号 表示 CSS 将 应 用 于 所 有 的 元 素 。 


[ 小 贴 士 ] 

box-sizing 在 IE7 及 更 早 的 版 本 中 是 不 起 作用 的 ， 所 以 即使 你 设置 了 border-box， 它 
仍 将 以 默认 的 content -box 方 式 来 泻 染 。 在 测试 网 站 时 ， 你 可 能 会 需要 添加 额外 的 CSS 
来 修复 所 有 的 布局 问题 。 你 也 可 以 在 HTMLS Please ( http://html5please.com/Zbox-sizing ) 上 
找到 一 个 腻子 脚本 (polyfill ) 来 使 pox-sizing 在 IE6 和 IE7 上 工作 ， 其 作者 还 发 布 过 
HTML5 Boilerplate, Modernizr 和 CSS3 Please 等 工具 作品 。 


在 图 4-11 中 ， 两 个 段落 的 宽度 都 是 300 像素 ， 每 边 的 内 边 距 都 是 20 像素 ， 边 框 宽度 是 5 
个 像素 。 在 第 一 个 段落 中 ， 内 边 距 和 边框 是 计算 在 300 像素 宽度 中 的 。 在 第 二 个 段落 中 ， 
内 边 距 和 边框 则 不 计算 在 300 像素 宽度 之 中 。 


300 pixels 























This is an example of an 
element with padding and 
border-box, 300 pixels 
wide. 


This is an example of an 
element with padding and 
content-box, 300 pixels wide. 





4-11: 一 个 块 级 元 素 呈 现 出 的 不 同 的 显示 效果 ， 只 是 因为 在 样式 中 设置 box-sizing 属性 的 值 是 


border-box 或 content-box 
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4.9 显示 

HTML 元 素 的 一 个 关键 属性 是 Gisplay， 它 会 影响 一 个 元 素 占据 屏幕 空间 的 方式 。 大 多 数 
元 素 的 这 个 属性 的 值 都 是 block 或 inline。 区 别 正如 它们 的 名 字 ， 块 级 元 素 呈 现 为 堆 倒 
的 块 ， 而 行内 元 素 (也 译 为 内 联 元 素 ) 呈现 为 文本 流 ， 如 图 4-12 所 示 。 























[ine elemen] ue 
element] [inline element : 


block element 
block element 


图 4-12: TATRUXARET, TUER TUARIEJESEROER 





Display 是 一 个 CSS 属性 ， 你 可 以 对 任何 元 素 的 这 个 属性 值 进行 修改 ， 不 过 你 应 该 先 了 
解 你 正在 使 用 元 素 的 默认 Display 值 是 什么 。 

















块 级 元 素 的 一 个 例子 是 段落 。 请 看 图 4-12， 把 每 一 个 块 级 元 素 想 象 成 是 一 个 段落 。 每 一 个 
段落 自动 新 起 一 行 ， 而 它 后 面 的 元 素 不 管 是 什么 也 同样 会 新 起 一 行 。 甚 他 块 级 元 素 包 括 诸 
如 «nav» 和 «article» 这 样 的 结构 化 元 素 、 分 级 标题 和 < div» 元 素 。 




















除非 你 手工 设置 成 不 同 的 宽度 ， 否 则 块 级 元 素 总 是 水 平 填充 包含 它们 的 元 素 。 因 此 ， 一 个 
存在 于 «body» 元 素 中 的 块 级 元 素 是 与 浏览 器 窗口 一 样 宽 的 。 每 个 块 级 元 素 自己 新 起 一 行 ， 
也 会 使 后 面 跟着 的 元 素 新 起 一 行 ， 不 管 是 不 是 块 级 元 素 。 











而 行内 元 素 则 是 插入 在 其 他 元 素 的 文本 中 间 的 。 例 如 ， 在 段落 文本 的 中 间 ， 可 能 有 一 个 
行内 元 素 <stz*ong>， 仅 包含 几 个 设置 成 用 粗 体 显 示 的 单词 。 其 他 的 行内 元 素 包 括 <em>、 
«span» 和 链接 。 








行内 元 素 的 大 小 由 其 包含 的 内 容 决定 。 行 内 元 素 通 常 包含 在 段落 或 其 他 块 级 元 素 中 ， 它 自 
身 不 会 新 起 一 行 ， 也 不 会 使 后 面 的 文本 新 起 一 行 。 






































除了 块 级 元 素 和 行内 元 素 ， 还 有 列表 项 (list-item) 元 素 ， 甚 对 应 于 项 目 符号 列表 中 的 
<1i>， 其 表现 在 大 多 数 方面 类 似 于 块 级 元 素 。 此 外 ， 表 格 、 表 格 行 和 表格 单元 也 都 有 它们 
自己 的 display 属性 。 
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display 属性 还 有 一 些 其 他 的 不 大 会 用 到 的 值 ， 你 可 以 在 Mozilla 开发 者 网 络 上 的 display 
分 栏 下 查阅 到 完整 的 列表 (https//developer.mozilla.org/en-US/docs/CSS/display ) 。 


虽然 对 于 大 多 数 元 素 你 会 保持 默认 的 display 值 ， 但 仍 可 以 用 CSS KEE. Alan, AIL 
的 将 列表 项 的 display 属性 从 1ist-item 更改 为 inline， 这样 它 们 将 排列 成 水 平 的 一 
行 ， 而 不 是 垂直 的 一 列 : 





li ( display: inline; } 


4.10 定位 


定位 是 你 能 将 元 素 放置 于 页 面 上 指定 位 置 的 关键 。 如 果 你 不 是 一 个 程序 员 ， 这 可 能 稍微 有 
点 难以 理解 ， 不 过 不 用 担心 ， 如 果 你 不 能 完全 明白 它 的 工作 原理 ， 只 需 理解 这 些 定 位 方式 
之 间 主 要 的 差别 就 行 。 























默认 情况 下 ， 页 面 内 容 的 流向 ， 对 于 行内 元 素 是 从 左 向 右 ， 并 在 必要 时 自动 换行 ， 而 
对 于 块 级 元 素 则 是 自 上 而 下 ， 就 像 图 4-12 所 显示 的 那样 。 但 是 我 们 可 通过 设 定位 置 
(position) 属性 为 不 同 值 来 改变 这 种 默认 状况 。 





























4.10.1 静态 定位 


默认 的 定位 方式 是 静态 (static) 定位 。 元 素 如 你 所 期 望 的 那样 ， 出 现在 它们 应 该 出 现 的 
地 方 ， 如 图 4-13 所 示 。 











SS aie ael dC i. RR RR RR EE RO ET RR a RD rM a 


: Block element #1 | 


E 4-13. 具有 默认 定位 方式 的 块 级 元 素 像 往常 一 样 以 堆 登 的 方式 显示 


4.10.2 ”相对 定位 
元 素 可 以 被 赋予 一 个 相对 (relation) 位 置 ， 它 会 忽略 页 面 上 的 其 他 内 容 流 ， 移 动 到 一 
个 不 同 的 位 置 。 例 如 ， 在 图 4-14 中 ， 第 二 个 块 采用 了 相对 定位 ， 相 对 于 它 原 来 的 位 置 向 下 
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移动 了 40 像素 ， 向 右 移动 了 40 像素 : 
p.2nd { position: relative; left: 40px; top: 40px; } 


a M acncóci sedis aae te tus dE 


: Block element £1 | 


repe 


! Block element #2 
:|Block element#3- 7-777777 77- 


4-14. 第 二 个 块 采用 了 相对 定位 
浏览 器 会 保留 元 素 原 来 所 占用 的 空间 ， 然 后 按 指定 的 方向 相对 地 移动 元 素 。 


正如 你 所 看 到 的 ， 它 只 是 与 页 面 上 的 其 他 元 素 相合 加 ， 而 不 是 将 其 他 元 素 挤 走 来 获得 空 
间 。 在 屏幕 的 右边 ，2 号 块 的 边缘 已 经 没有 空间 再 向 右 移动 40 像素 了 ， 所 以 它 的 一 部 分 移 
出 了 屏幕 ， 用 户 看 不 到 了 。 


注意 ， 相 对 定位 后 的 元 素 是 全 加 在 页 面 的 其 他 元 素 上 方 的 。 


要 对 一 个 元 素 相对 定位 ， 你 需要 设置 position 属性 值 为 relative， 然 后 还 要 定义 位 置 
的 变化 ， 是 水 平移 动 ， 还 是 垂直 移动 ， 或 两 个 方向 同时 移动 。 




















4.10.3 绝对 定位 
绝对 定位 不 同 于 相对 定位 。 浏 览 器 会 按 你 的 请 求 移动 元 素 ， 但 它 不 会 再 为 元 素 保 留 原来 的 


空间 。 


不 同 于 相对 定位 元 素 是 相对 于 它 自身 原来 在 内 容 流 中 的 位 置 来 进行 定位 的 ， 对 于 绝对 定位 
元 素 ， 浏 览 器 是 使 用 包含 该 元 素 的 第 一 个 非 静 态 定位 的 元 素来 对 其 进行 定位 的 。 


在 下 面 的 例子 中 ， 三 个 块 都 是 包含 在 一 个 «div» 元 素 中 的 : 











p.2nd { position: absolute; left: 40px; top: 40px; } 





2 号 块 采用 了 绝对 定位 ， 所 以 它 被 其 他 元 素 流 忽略 。 取 而 代 之 ， 它 被 放置 到 从 包含 它 的 
«div» 元 素 的 左上 角 向 下 移动 40 像素 ， 向 右 移动 40 像素 的 地 方 。 


因为 没有 保留 空间 给 它 ， 它 只 能 受 加 在 其 他 元 素 之 上 ， 如 图 4-15 所 示 。 
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B 4-15: 第 二 个 块 采用 绝对 定位 


你 会 对 到 图 4-15 中 的 绝对 定位 元 素 感 到 奇怪 ， 它 的 宽度 只 是 与 其 内 容 一 样 宽 ， 而 不 是 像 一 
个 正常 的 块 级 元 素 那 样 ， 是 整个 包含 元 素 的 宽度 。 是 的 ， 绝 对 定位 的 块 级 元 素 不 再 像 其 他 
块 级 元 素 那 样 有 默认 的 100% 宽度 。 


如 果 有 更 多 的 文本 在 采用 绝对 定位 的 元 素 中 ， 它 们 将 一 直 扩 展 到 它 的 包含 元 素 的 右边 界 ， 
然后 文本 会 自动 换行 。 




















[ 小 贴 士 ] 
你 可 能 已 经 注意 到 这 些 案例 中 有 些 元 素 是 重 登 的 。 对 于 重 登 的 元 素 ， 要 改变 它们 的 登 放 次 
序 ， 你 可 以 为 元 素 指定 z-inaex 属性 值 ， 具 有 最 高 值 的 元 素 将 在 最 前 面 ， 你 也 可 以 使 用 
负数 : 

p.1st ( z-index: 50; ) 


p.2nd { position: relative; left: 40px; top: 40px; 
z-index: 25; ) 


4.10.4 ”固定 定位 

固定 定位 与 绝对 定位 非常 相似 ， 但 元 素 是 相对 于 整个 页 面 来 定位 的 ， 而 不 是 相对 于 它 的 包 
含 元 素 。 所以， 在 前 面 的 例子 中 ， 如 果 我 们 使 用 固定 定位 ，2 号 方块 将 会 相对 于 网 页 的 左 
上 角 向 下 移动 40 像素 ， 向 右 移动 40 像素 。 


任何 具有 固定 位 置 的 元 素 将 一 直 停 留 在 某 个 位 置 ， 哪 怕 是 用 户 滚动 页 面 ， 所 以 如 果 你 想 要 
一 个 导航 栏 或 一 其 他 元 素 能 总 是 停留 在 页 面 的 顶部 ， 使 用 固定 定位 就 能 实现 。 记 住 ， 其 他 
元 素 将 忽略 固定 定位 元 素 ， 因 此 它们 之 间 很 可 能 会 重合 。 












































定 定位 在 移动 浏览 器 中 的 行为 有 点 古怪 。Brad Frost 在 文章 “Fixed Positioning in Mobile 
Browsers” (http://bradfrostweb.com/blog/mobile/fixed-position/) 对 此 对 此 进行 了 详细 说 明 。 
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4.10.5 定位 元 素 的 度量 单位 
当 设 定 一 个 元 素 的 相对 、 绝 对 或 固定 位 置 时 ， 是 相对 于 上 、 下 、 左 、 右 四 个 方向 来 给 定 偏 
移 值 。 
你 可 以 使 用 1left 或 right 来 (但 不 能 同时 指定 两 个 ) 水 平移 动 ，top 或 bottom 来 (也 
不 能 同时 指定 两 个 ) 垂直 移动 。 如 果 你 不 小 心 给 了 它 一 组 相对 的 方向 (比如 ， 同 时 给 出 
left 和 tight)， 浏 览 器 会 包 略 第 一 个 声明 。 






































你 有 时 并 不 需要 同时 在 水 平和 垂直 方向 上 移动 一 个 元 素 ， 这 时 你 只 声明 其 中 之 一 的 属性 值 
即 可 。 





注意 ， 当 设 定 方向 时 ， 设 定 值 表示 的 是 起 始 方向 ， 而 不 是 目标 方向 ， 所 以 left:40 px; 是 
表示 将 方块 从 其 原始 位 置 的 左手 边 向 对 边 移 动 40 像素 ， 实 际 上 也 即 是 向 右 移动 。 


你 也 可 以 使 用 负数 。 但 是 负数 在 相对 定位 和 绝对 定位 (及 固定 定位 ) 中 所 产生 的 影响 是 不 
一 样 。 如 有 果 你 采用 相对 定位 ， 一 个 元 素 向 左 移动 40 像素 与 向 右 移动 -40 像素 是 同样 的 效 
果 。 向 上 和 向 下 移动 也 是 如 此 ， 因 为 你 只 是 在 相对 于 元 素 自身 在 移动 。 


而 绝对 定位 和 固定 定位 就 不 一 样 了 ， 因 为 它们 不 是 相对 自身 移动 。 如 下 面 的 代码 所 示 ， 绝 
对 定位 方式 中 ， 让 元 素 从 左上 角 向 右 且 向 下 偏 移 40 像素 ， 那 么 在 水 平方 向 上 它 将 位 于 包 
含 元 素 左边 线 向 右 40 像素 的 位 置 (参见 图 4-16) : 


















































p.2nd { position: absolute; left: 40px; top: 40px; } 
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| Bloek element#+ -| 
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: Block element £3 : 


4-16: 第 二 个 长 方块 采用 绝对 定位 ， 从 左上 角 向 右 且 向 下 偏 移 40 像素 


再 来 看 负数 的 情况 ， 对 2 号 方块 向 右边 移动 -40 像素 ， 是 要 先 将 它 与 包含 元 素 的 右边 线 平 
齐 ， 然 后 再 向 右 移动 40 个 像素 ( 见 图 4-17) : 




















p.2nd { position: absolute; right: -40px; top: 40px; ) 





Block element #1 





图 4-17. 第 二 个 方块 从 右边 界 向 左 移动 -40 像素 后 的 位 置 


定位 可 能 难于 理解 ， 最 好 的 学 习 方 式 是 建立 一 个 测试 页 
试 ， 这 样 能 更 好 地 了 解 它们 是 如 何 工作 的 。 


4.11 浮动 和 清除 


浮动 (float) 和 清除 (clear) 属性 也 允许 你 改变 一 个 元 素 在 页 面 上 的 位 置 ， 尽 管 它们 
是 独立 于 position 属性 的 ， 通 过 浮动 ， 你 可 以 使 内 容 流 环 线 着 个 特定 的 元 素 ， 





F 对 所 有 的 这 些 属性 进行 尝 


S 












































例如 ， 假设 你 有 一 个 图 片 在 两 个 段落 之 间 ， 如 以 下 代码 所 示 (参见 图 4-18) : 








«p»...«/p» 
«img src-"image.jpg"» 
«p»...«/p» 





The Wolong National Nature Preserve, in the Sichuan Province of China, is 
home to more than 150 giant pandas. It's one of the key sites for panda 
breeding research, and 66 cubs have been born at Wolong since it was 
established in 1980. 





The Wolong Nature Reserve covers around 200,000 hectares (772 square 
miles) in the Ming Shan mountain range, in the ABA Tibetan Autonomous 
Region, near the Tibetan Plateau. Elevations in the reserve range from 1555 to 
4600 meters (4,000 to 11,000 ft). 











B 4-18: 图 片 在 两 个 段落 之 间 未 浮动 





你 不 希望 段落 间 出 现 空白 ， 你 想 要 让 文本 填 满 空 两 段 之 间 的 空白 区 域 ， 如 图 4-19 所 示 。 
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The Wolong National Nature Preserve, in the Sichuan Province of China, is 
home to more than 150 giant pandas. It's one of the key sites for panda 
breeding research, and 66 cubs have been born at Wolong since it was 
established in 1980. 





NN The Wolong Nature Reserve covers around 200,000 
CNN hectares (772 square miles) in the Ming Shan 

WAS mountain range, in the ABA Tibetan Autonomous 
; Region, near the Tibetan Plateau. Elevations in the 


11,000 ft). 








JN) reserve range from 1555 to 4600 meters (4,000 to 








4-19: 图 片 向 左 浮动 


使 用 float 属性 告诉 浏览 器 将 元 素 浮 动 到 它 的 包含 元 素 的 左边 或 右边 ， 后 继 的 元 素 ， 不 管 
是 块 级 元 素 还 是 行内 元 素 ， 都 将 环绕 浮动 的 元 素 。 


然 ， 你 并 不 想 使 网 站 上 的 所 有 图 片 都 是 浮动 的 ， 所 以 你 需要 以 某 种 方式 来 区 分 图 片 ， 比 








uu class 属性 。 你 可 以 定义 一 个 floatleft 类 选择 器 ， 将 其 应 用 于 你 想 要 向 左 浮动 
的 元 素 : 

.floatleft { float: left; } 
记 住 ， 所 有 后 继 元 素 均 将 环绕 浮动 的 元 素 ， 直 到 没有 更 多 的 空间 。 最 终 有 可 能 出 现 你 并 不 





想 要 的 环绕 效果 ， 比 如 图 4-20 中 的 标题 











The Wolong National Nature Preserve, in the Sichuan Province of China, is 
home to more than 150 giant pandas. It's one of the key sites for panda 
breeding research, and 66 cubs have been born at Wolong since it was 
established in 1980. 








The Wolong Nature Reserve covers around 200,000 
§ hectares (772 square miles) in the Ming Shan 

© mountain range, in the ABA Tibetan Autonomous 

Ñ Region, near the Tibetan Plateau. Elevations in the 
IRA reserve range from 1555 to 4600 meters (4,000 to 

Bi 11,000 ft). 


Additional Panda Facts 





Pandas are an endangered species, with between 1500 and 3000 living in the 
wild, and less than 300 in captivity (research centers and zoos). 





The Wolong National Nature Preserve, in the Sichuan Province of China, is 
home to more than 150 giant pandas. It's one of the key sites for panda 
breeding research, and 66 cubs have been born at Wolong since it was 
established in 1980. 







J | The Wolong Nature Reserve covers around 200,000 
b E hectares (772 square miles) in the Ming Shan 

EY N mountain range, in the ABA Tibetan Autonomous 

N Region, near the Tibetan Plateau. Elevations in the 

dA reserve range from 1555 to 4600 meters (4.000 to 

Bi 11,000 ft). 


Additional Panda Facts 


Pandas are an endangered species, with between 1500 and 3000 living in the 
wild, and less than 300 in captivity (research centers and zoos). 


图 4-20. 在 右边 的 例子 中 ， 标 题 被 清除 了 浮动 状态 ， 并 新 起 一 行 至 浮动 图 片 的 下 方 


如 果 你 想 取消 浮动 ， 仅 需 
行 ) 之 上 : 


ul { clear: left; } 


将 clear 属性 应 用 于 你 要 取消 浮动 的 第 





一 个 元 素 (元 素 将 新 起 一 


当 你 应 用 clear JAPE, left 或 者 right 属性 值 需要 与 前 面 的 float 属性 值 相 匹配 。 








4.12 ”基本 样式 
回 到 “永远 的 大 熊猫 ”这 个 网 站 ， 让 我 们 添加 一 些 基 本 的 样式 使 它 看 起 来 更 漂亮 。 


首先 ， 用 简单 而 不 复杂 的 方式 来 做 这 件 事 。 我 们 将 用 到 本 章 之 前 讲 到 的 box-sizing 属 
性 ， 我 们 将 它 应 用 于 所 有 的 元 素 : 








*, *:before, *:after { 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 


) 


我 们 设置 了 分 级 标题 、 段 落 的 字体 大 小 以 及 列表 的 样式 ， 并 使 分 级 标题 字体 加 粗 。 接 下 
来 ， 我 们 将 添加 一 些 内 、 外 边 距 以 使 各 元 素 间 稍微 分 开 些 ， 并 在 列表 项 上 加 上 圆 点 项 目 符 
号 ， 如 你 在 图 4-21 中 所 见 : 























hl { font-size: 2em; } 

h2 { font-size: 1.5em; ) 

hl, h2 ( font-weight: bold; margin: 5px 0; } 

p { font-size: lem; margin: 5px 0; } 

ul { padding-left: 10px; margin: 10px 0; list-styletype:disc; } 
li ( margin-left: 10px; padding-left: 10px; } 
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图 4-21: 为 示例 站 点 中 添加 了 内 、 外 边 距 及 项 目 符号 样式 后 的 效果 














接 下 来 ， 我 们 将 为 页 面 上 的 结构 性 元 素 添 加 一 个 边框 ， 这 只 是 为 了 更 容易 地 看 到 元 素 所 在 
的 位 置 。 即 使 最 终 的 设计 中 是 没有 边框 的 ， 但 在 创建 设计 的 工作 进程 中 ， 临 时 为 元 素 添加 
边框 通常 是 有 益 的 ， 这 样 你 可 以 很 容易 地 对 内 、 外 边 距 的 值 进行 调整 。 下 面 是 为 元 素 添 加 
边框 的 代码 (你 会 在 图 4-22 中 看 到 结果 ) : 















































header, article, aside, footer ( border: 1px solid #111; 


} 
为 了 让 页 面 看 上 去 更 整齐 一 点 ， 我 们 再 给 结构 性 元 素 加 上 内 、 外 边 距 ， 结 果 如 图 4-23 PR: 


header, article, aside, footer ( border: 1px solid #111; 
padding: 10px lem; margin: 0 5$ 10px; } 
header { margin-top: 10px; } 
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[Pandas Forever 
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Links 


foc panda ing research, and 66 cubs have been bom at 
the wild, and Jess than 300 in captivity (research centers and 008). 











图 4-22. 在 示例 站 点 中 为 页 面 的 结构 性 元 素 加 上 边框 





Pandas Forever 


Pandas in Wolong 

The Wolong National Nature Preserve, in the Sicbuan Province of China, is home to more than 150 giant pandas, It's one 
cubs have been born at Wolong since it was established in 1980. Pandas are an species, with between 1500 
captivity (research centers and zoos). 


Related Links 
» Pandas Unlimited 
£ pimai 
» Panda Facts at WWE 


one of the key sites for panda breeding 
and 3000 living in the wikd, and less than 300 in 


research, and 66 





© 2014 Pandas Forever 




















图 4-23: 在 示例 站 点 中 以 内 、 外 边 距 来 分 隔 元 素 


你 会 
HTML 而 没有 样式 ， 这 是 
事 使 其 不 是 响应 式 的 。 Co ARUM ER 如 
管 在 更 大 尺寸 的 屏幕 上 ， 变 宽 的 文本 使 得 阅读 变 得 困难 。 








Pandas Forever 


Pandas in Wolong 


The Wolong National Nature Preserve, 
in the Sichuan Province of China, is 
home to more than 150 giant pandas. 
It's one of the key sites for panda 
breeding research, and 66 cubs have 
been born at Wolong since it was 
established in 1980. Pandas are an 
endangered species, with between 1500 
and 3000 living in the wild, and less 
than 300 in captivity (research centers 
and zoos). 


Related Links 


图 4-24: EERE (手机 屏幕 )》 上 查看 示例 站 点 的 显示 效果 




















Ea 








4-24 ffl 








pa 











发 现 我 在 添加 样式 到 网 站 时 没有 谈 及 响应 式 设计 。 如 果 你 还 记得 ,我 们 一 开始 只 有 
一 个 啊 应 式 网 站 的 默认 做 法 。 到 目前 为 止 ， 我们 还 没有 做 过 任何 


尽 


4-25 所 示 ， 
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Pandas in Wolong 


The Wolong National Nature Preserve, in the Sichuan Province of China, is home to more than 150 
giant pandas. It's one of the key sites for panda breeding research, and 66 cubs have been born at 
Wolong since it was established in 1980. Pandas are an endangered species, with between 1500 and 
3000 living in the wild, and less than 300 in captivity (research centers and zoos). 





Related Links 


*  Pandas Unlimited 
* National Zoo Panda Cams 
* Panda Facts at WWF 
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B 425. 在 中 等 宽度 屏幕 (平板 电脑 屏幕 ) 上 查看 示例 站 点 的 显示 效果 
我 们 随后 会 在 第 5 章 中 讨论 媒体 查询 ， 你 将 学 习 如 何 改变 站 点 布局 以 适应 屏幕 宽度 。 








4.13 总 结 


在 本 章 中 ， 我 们 知道 了 CSS 是 按 版 本 发 布 的 ， 与 HTML 的 版 本 状况 类 似 。 最 新 版 本 的 
CSS3 为 我 们 带 来 了 一 些 新 的 属性 ， 包 括 响应 式 设计 的 基石 一 一 媒体 查询 。 


尽管 某 些 CSS3 属性 仍 在 测试 阶段 ， 但 我 们 可 以 通过 浏览 器 前 缀 在 设计 中 包含 它们 ， 浏 览 
器 前 级 使 得 浏览 器 能 够 演 染 一 个 还 在 测试 中 的 属性 。 


在 网 页 中 应 用 CSS， 既 可 通过 独立 的 样式 表 文件 ， 也 可 直接 在 网 页 的 代码 中 包含 谷 入 样式 
或 内 联 样式 。 一 般 来 说 ， 使 用 样式 表 是 最 好 的 选择 ， 因 为 它 允 许 你 在 全 局 性 地 应 用 样式 于 
整个 网 站 或 网 站 的 某 一 部 分 。 


层 倒 是 一 套 非 常 详尽 的 规则 ， 它 规定 了 浏览 器 如 何在 网 页 中 应 用 样式 ， 如 样式 以 何 种 顺序 
应 用 ， 以 及 规则 的 优先 级 。 标 记 为 重要 的 规则 获得 最 高 优先 级 ， 其 次 是 内 联 样 式 ， 然 后 是 
ID、 类 和 元 素 选 择 器 ， 再 就 是 继承 的 规则 以 及 默认 值 。 如 果 还 是 无 法 决定 ， 浏 览 器 将 按 特 
殊 性 和 样式 出 现 的 顺序 来 决定 哪 条 规则 胜出 。 


虽然 层 登 可 以 是 非常 复杂 的 ， 但 如 果 你 在 添加 样式 到 网 站 时 提前 规划 ， 尽 可 能 以 总 体 一 致 的 
方式 来 添加 它们 ， 就 能 使 样式 应 用 变 得 简单 明了 ， 从 而 只 nt Em ear: 
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通过 重 置 默认 值 来 开始 你 的 CSS 之 旅 ， 将 确保 所 有 的 浏览 器 都 能 如 你 所 愿 地 泻 染 样式 。 如 
果 你 不 想 自 己 创建 ， 可 以 在 网 上 找到 各 种 重 置 样式 表 。 


没有 一 种 特别 正确 的 方法 来 组 织 样式 表 中 的 代码 ， 但 最 好 是 采用 统一 的 方式 ， 那 样 在 事后 
也 能 够 很 容易 地 找到 相应 代码 。 你 可 以 按 页 面 或 站 点 区 块 来 组 织 样式 ， 也 可 以 按照 样式 的 
类 别 来 组 织 ， 比 如 把 文字 排版 样式 放 在 一 起 。 


CSS 布局 中 最 重要 的 概念 是 盒 模型 ， 其 决定 了 元 素 是 如 何在 网 页 上 显示 的 ， 每 个 元 素 表现 
为 一 个 矩形 盒子 。 每 个 盒子 都 有 宽度 和 高 度 ， 也 可 能 有 边框 、 内 边 距 和 外 边 距 。 


一 开始 ， 一 个 元 素 的 以 上 属性 用 的 都 是 默认 值 ， 但 这 些 值 可 以 使 用 不 同 的 度量 单位 进行 修 
改 。 对 于 响应 式 设计 ， 大 多 数 度量 单位 应 该 是 相对 单位 ， 比 如 百分比 、em 和 rem。 垂 直 度 
量 单位 有 时 可 以 是 绝对 单位 ， 比 如 像素 。 你 还 可 以 使 用 auto， 浏 览 器 将 基于 了 毗邻 元 素 或 
包含 元 素来 自动 计算 属性 值 。 















































CSS 的 box-sizing 属性 允许 你 改变 浏览 器 泻 染 内 边 距 与 边框 的 方式 ， 也 就 是 说 ， 元 素 的 
宽度 是 否 包含 进 了 内 边 距 与 边框 的 宽度 。 定 位 使 你 能 决定 元 素 出 现在 页 面 上 的 位 置 。 




















现在 你 已 经 了 解 了 CSS 的 基本 工作 原理 
建 响应 式 网 站 。 





在 第 5 章 中 ， 我 们 将 学 习 使 用 CSS 媒体 查询 构 














第 5 章 


媒体 查询 





媒体 查询 是 响应 式 网 站 能 够 对 麟 览 网 站 的 设备 做 出 啊 应 的 关键 所 在 。 到 目前 为 止 ， 我 们 所 
有 应 用 到 网 页 的 CSS 声明 都 未 考虑 屏幕 尺寸 等 设备 特性 。 
而 CSS 媒体 查询 则 人 允许 我 们 基于 浏览 网 站 的 设备 的 特性 来 应 用 不 同 的 样式 声明 ， 最 常用 
的 设备 特性 是 视 口 宽度 。 通 过 查询 视 口 宽度 ， 我 们 可 以 实现 如 下 功能 : 站 点 默认 为 两 列 布 
局 ， 如 果 屏 幕 ( 视 口 ) 宽度 超过 40 em， 则 变 成 三 列 布局 。 











媒体 查询 是 响应 式 设计 的 一 部 分 ， 它 使 得 你 可 以 在 手机 上 看 到 不 同 于 平板 电脑 或 桌面 显 
示 器 上 的 页 面 布局 。 媒 体 查 询 有 时 也 称 为 响应 式 设计 的 秘 制 调料 (special sauce) 或 魔 仙 
Ey (magic pixie dust) ， 因 为 它 是 响应 式 设计 中 最 重要 的 部 分 ， 没 有 它 ， 也 就 不 会 有 奇迹 
的 发 生 。 


在 本 章 中 ， 你 将 学 习 如 何 创 建 媒体 查询 并 将 其 加 入 到 CSS 样式 中 。 了 解 媒体 查询 可 以 用 来 
查询 什么 (除了 众所周知 的 视 口 宽度 )， 以 及 浏览 器 对 媒体 查询 的 支持 状况 。 






































你 还 将 学 到 在 考虑 网 站 的 布局 设计 时 应 从 最 小 屏幕 宽度 开始 ， 再 以 自 下 而 上 的 方式 进行 渐 
进 增强 。 你 将 学 习 什 么 是 断 点 和 设计 范围 ， 以 及 如 何在 设计 中 使 用 它们 。 


最 后 ， 我 们 将 回 到 示例 站 点 并 通过 为 其 加 入 媒体 查询 来 创建 用 于 宽屏 幕 的 两 列 式 布局 ， 并 
根据 视 口 宽度 的 变化 来 改变 原 布 局 。 


5.1 何 为 媒体 查询 


尽管 媒体 查询 能 在 屏幕 上 实现 非常 棒 的 效果 ， 可 它 的 语法 实际 上 相当 简单 。 
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基本 上 ， 你 会 以 类 似 于 “屏幕 是 否 宽 于 40 em” 这 样 的 问题 起 头 ， 后 带 一 些 CSS HEX. An 
果 问 题 的 答案 是 确定 的 ， 那 么 浏览 器 会 将 这 些 CSS 样式 应 用 于 网 页 。 如 果 答 案 是 否定 的 ， 
浏览 器 将 忽略 这 些 CSS 样式 。 








如 有 果 你 是 一 名 程序 员 ， 你 可 以 把 它 当 作 是 一 条 if/then 语句 。 尽 管 CSS2 已 经 支持 根据 媒 
体 类 型 (比如 屏幕 或 打印 机 ) 来 执行 媒体 查询 ， 但 直到 CSS3， 我 们 才能 够 基于 设备 特性 
(比如 视 口 宽度 ) 来 执行 媒体 查询 。 这 也 是 响应 式 设计 直到 2010 年 才 出 现 的 原因 ， 在 这 之 
前 响应 式 设 计 不 可 能 被 实现 。 


这 是 一 个 简单 的 媒体 查询 例子 : 














body { background-color: green; } 


@media only screen and (min-width: 40em) { 
body { background-color: blue; } 


第 一 行 的 CSS 声明 将 网 站 «body» 元 素 的 背景 色 设置 成 绿色 。 第 二 行 CSS 声明 表示 如 果 
视 口 的 最 小 宽度 是 40 em， 那 么 <body> 元 素 的 背景 色 将 变 成 蓝 色 。 





也 就 是 说 ， 罕 屏 获 得 绿色 背景 ， 宽 屏 获得 蓝 色 背景 。( 注 意 : 并 非 所 有 的 浏览 器 都 支持 媒 
体 查询 ， 我 们 一 会 就 将 解决 这 个 问题 。) 


记 住 ， 样 式 表 中 的 每 一 条 CSS 声明 会 履 盖 它 之 前 (或 前 一 个 样式 表 中 ) 的 声明 。 所 以 ， 对 
于 相同 的 选择 器 或 属性 ， 应 把 媒体 查询 放 在 非 查 询 声 明之 后 。 


下 面 是 媒体 查询 的 一 些 常用 示例 。 





























P 列 
在 窗 屏 上 以 一 列 显示 ， 当 屏幕 足够 宽 时 ， 变 成 两 列 、 三 列 或 更 多 列 。 





。 导航 
在 窗 屏 上 显示 为 隐藏 导航 栏 〈 例 如 ， 下 拉 式 菜单 )， 在 宽屏 上 则 显示 为 完整 的 导航 〈 可 
一 次 看 到 所 有 导航 项 ) 。 








。 文字 排版 
根据 视 口 的 宽度 改变 文字 大 小 或 调整 列 宽 ， 使 得 每 一 行 都 能 以 易于 阅读 的 最 佳 字 数 显 
示 。 

。 BA 


对 于 同一 图 片 ， 根 据 页 面 可 用 空间 的 大 小 以 不 同 的 尺寸 (小 的 特写 图 片 与 大 的 远景 图 
F) 显示 。 
































[小 贴 士 ] 
在 媒体 查询 中 使 用 背景 色 来 测试 表达 式 是 个 好 方法 ， 当 调整 浏览 器 窗口 大 小 使 媒体 查询 生效 
时 ， 你 能 够 很 容易 地 看 到 发 生 的 变化 。 


5.2 ”媒体 查询 结构 


媒体 查询 最 常见 的 用 法 是 直接 与 其 他 CSS 一 起 包含 在 普通 样式 表 中 





Gmedia only screen and (min-width: 40em) ( 
body { background-color: blue; } 


) 


看 下 这 个 例子 ， 它 看 上 去 有 很 多 代码 ， 但 很 容易 按 含义 切 分 成 不 同 的 部 分 。 让 我 们 来 逐一 
地 解释 它 。 





Gmedia 








首先 ， 在 样式 表 中 媒体 查询 总 是 以 emedia 开头 来 表明 这 是 一 条 媒体 查询 语句 。 


紧 跟 omedia 后 的 是 一 个 或 者 多 个 表达 式 ， 它 们 可 判别 为 真 或 假 。 在 创建 媒体 查询 时 ， 必 
须 以 媒体 类 型 (此 处 是 screen) 作为 第 一 个 表达 式 : 





@media only screen 





尽管 只 有 一 个 单词 screen, 但 也 是 一 个 完整 的 表达 式 ， 意 思 是 “媒体 类 型 是 screen 
吗 ”。 与 之 对 应 的 还 有 print (打印 机 )、praille (FX) 或 者 all (全 部 ) 等 其 他 类 型 
选项 ， 响 应 式 网 页 设计 的 目的 决定 了 对 于 媒体 类 型 我 们 基本 上 都 是 用 screen, 





你 会 注意 到 在 媒体 类 型 之 前 有 一 个 额外 的 单词 : only。 这 其 实 只 是 一 个 小 技巧 ， 一 些 老 
式 浏 览 器 只 支持 CSS2 版 本 的 媒体 类 型 查询 ， 而 不 支持 新 的 CSS3 版 媒体 特性 查询 。 因 
此 ， 当 它们 读 到 我 们 之 前 的 媒体 查询 例子 时 ， 能 够 理解 screen， 却 理解 不 了 and (min- 
width: 40em) 。 浏 览 器 本 应 该 是 跳 过 它们 不 理解 的 CSS 声明 ， 但 对 于 媒体 查询 ， 浏 览 器 
的 行为 却 有 点 不 同 ， 它 们 不 是 跳 过 整 条 声明 ， 而 是 只 跳 过 and (min-width: 40em) 部 
分 。 结 果 就 是 老式 浏览 器 会 根据 screen 回答 “是 的 ， 这 是 真 的 ”， 并 忽略 视 口 的 宽度 ， 将 
CSS 应 用 于 所 有 尺寸 的 屏幕 。 









































我 们 不 希望 这 种 情况 发 生 ， 所 以 加 入 了 only 这 个 单词 ， 这 实际 上 并 不 会 改变 媒体 查询 的 
整体 含义 ， 却 能 让 那些 老式 浏览 器 忽略 掉 整 个 查询 ， 而 这 正 是 我 们 所 希望 的 ( 稍 后 我 们 将 
谈论 如 何 给 予 这 些 老 式 浏览 器 合适 的 样式 )。 
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[ 小 贴 士 ] 


媒体 类 型 screen 涵盖 了 电脑 和 移动 设备 (任何 有 屏幕 的 设备 )， 而 print 则 代表 打印 机 。 


可 以 使 用 all 来 针对 所 有 的 媒体 类 型 ， 


即 可 ， 这 将 使 媒体 类 型 默认 为 all。 


但 不 必 显 式 地 写 出 来 ， 只 需 简单 地 省 略 掉 媒 体 类 型 


还 有 一 些 其 他 的 媒体 类 型 ， 比 如 braille ( 育 文 )、projection (投影 ) speech ( 语 
dp) fetv (电视 )， 但 它们 并 不 常用 ， 且 也 不 总 是 如 你 想 的 那样 工作 。 有 关 媒 体 类 型 的 更 多 
信息 ， 参 考 W3C 网 站 上 的 “Media types”( http:/www.w3.org/TR/CSS2/media.html )。 


之 后 是 and; 


Gmedia only screen and 


需要 这 个 单词 是 因为 有 多 个 表达 式 ，screen 是 第 一 个 表达 式 ， 现 在 还 要 添加 男 一 个 表达 式 
来 评估 设备 特性 。 因 为 是 ana 关键 字 ， 所 以 媒体 查询 中 的 两 个 表达 式 都 需要 为 真 ， 才 能 使 
整 条 查询 的 结果 为 真 ，CSS 样式 也 才 会 被 应 用 。 


媒体 查询 还 可 以 使 用 or 或 者 not KEF, 或 者 有 多 个 柑 套 的 表达 式 ， 但 通常 没有 理由 去 
做 如 此 复杂 的 查询 ， 所 以 在 本 书 中 我 们 对 于 这 方面 的 内 容 将 不 做 深 入 探讨 。 


接 下 来 就 到 了 媒体 查询 的 主体 ， 这 是 我 们 依据 媒体 特性 (例如 ， 视 口 或 屏幕 的 宽度 ， 设 备 
的 方向 ， 或 颜色 性 能 ) 来 判断 表达 式 的 地 方 : 

















Gmedia only screen and (min-width: 40em) 


在 这 里 ，and 之 后 的 (min-width: 








40 em) 是 你 的 第 二 个 表达 式 (注意 ， 表 达 式 在 括 





号 内 )。 所 有 表达 式 都 应 包含 在 括号 内 ， 除 非 它 是 只 有 一 个 单词 的 媒体 类 型 表达 式 ， 比 如 


screen X print, 


HZ min- 表示 “至 少 ”， 也 就 是 “大 于 或 等 于 ”。 因 此 这 里 是 说 如 果 视 口 至 少 宽 40 em 


(或 者 如 果 视 口 大 于 或 等 于 40 em 宽 )。 


如 果 视 口 的 宽度 小 于 40 em， 则 查询 结 
查询 结果 为 真 。 


相对 应 的 ， 前缀 max- 表示 “最 多 ”， 





吉 果 为 假 。 如 果 宽 度 正 好 是 40 em 或 者 大 于 40 em， 则 


即 “小 于 或 等 于 ”的 意思 。 


最 后 ， 用 一 对 花 括号 把 整 条 媒体 查询 结果 为 真 时 应 用 的 所 有 CSS 样式 括 起 来 : 


@media only screen and (min-width: 40em) { 





有 一 件 事 需要 特别 注意 ， 因 为 你 既 使 用 花 括号 来 包含 媒体 查询 中 的 所 有 声明 ， 同 时 也 用 花 
括号 包含 单条 样式 声明 ， 这 很 容易 让 人 迷惑 。 所 以 请 确保 花 括 号 的 数目 正确 ， 如 果 你 漏 掉 
了 一 个 ， 浏 览 器 在 应 用 样式 时 将 发 生 混 乱 。 


在 需要 时 ， 可 以 在 媒体 查询 中 包含 多 个 声明 : 











@media only screen and (min-width: 40em) { 
body { background-color: blue; } 
p { padding: 5px 5$; } 
.example { color: red; ) 


) 


记 住 ， 在 使 用 媒体 查询 时 ， 不 要 把 所 有 样式 都 放 入 媒体 查询 中 。 正 确 的 做 法 应 该 是 先 声 明 
适用 于 所 有 视 口 宽度 的 非 媒体 查询 样式 ， 然 后 只 是 用 媒体 查询 去 履 盖 掉 那 些 在 特定 宽度 中 
用 到 的 样式 。 


所 以 ， 在 本 章 开头 的 例子 中 ， 我 们 一 开始 设置 所 有 视 口 宽度 下 的 背景 色 均 为 绿色 。 然 后 在 
视 口 宽度 大 于 等 于 40 em 的 时 候 ， 媒 体 查 询 以 蓝 色 背景 替代 绿色 背景 ， 而 其 他 设置 保持 不 
4$. ZEF 40 em 的 视 口 还 是 原本 的 绿色 : 











body { background-color: green; } 


@media only screen and (min-width: 40em) { 
body { background-color: blue; } 
} 


5.3 ”在 样式 表 链 接 中 使 用 媒体 查询 


在 第 4 章 中 我 们 讲 过 ， 可 以 在 HTML 页 面 的 <head> 元 素 中 链接 一 个 或 多 个 CSS 文件 : 








«link rel="stylesheet" href="styles/mainstyles.css"> 
«link rel="stylesheet" href-"styles/otherstyles.css"» 


浏览 器 从 链接 的 第 一 个 样式 表 开 始 ， 简 单 地 读 取 并 应 用 所 有 样式 表 中 的 所 有 样式 声明 。 


不 同 于 在 样式 表 内 编写 媒体 查询 ， 我 们 可 以 告诉 浏览 器 ， 整 个 样式 表 仅 在 媒体 查询 结果 为 
真 时 才 应 用 ， 否 则 就 忽略 掉 样 式 表 。 











如 有 果 你 曾经 从 事 过 网 站 相关 工作 ， 那 么 对 于 print 样式 表 ， 你 也 许 见 过 这 样 的 CSS2 版 的 
用 法 : 


«link rel="stylesheet" href="styles/mainstyles.css"> 
«link rel="stylesheet" href="styles/printstyles.css" media="print"> 




















在 这 个 例子 中 ， 我 们 告诉 浏览 器 ， 如 果 用 户 是 要 打印 页 面 ， 而 不 是 在 屏幕 上 浏览 它 ， 那 么 将 
加 入 额外 的 样式 。 比 如 ， 可 以 为 了 打印 而 隐藏 重复 的 背景 图 像 ， 以 免 浪 费 打 印 机 墨水 或 碳 粉 。 
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要 指定 一 个 样式 表 仅 用 于 打印 机 ， 只 需 把 media-"print" 添加 到 link 元 素 中 ， 它 告诉 
浏览 器 ， 当 查询 “媒体 类 型 是 print 吗 ” 为 真 时 ， 就 应 用 printstyles.css ERK, WRA 
假 ， 则 忽略 之 。 

另 一 个 样式 表 链 接 疫 有 指定 媒体 类 型 ， 因 此 不 管 是 屏幕 、 打 印 机 或 其 他 媒体 类 型 ， 该 样式 
表 都 会 被 应 用 。 

通常 我 们 添加 打印 样式 来 覆盖 掉 原 样式 ， 所 以 打印 样式 表 链 接应 在 最 后 列 出 。 


告诉 浏览 器 样式 表 用 于 打印 机 很 简单 ， 仅 需 用 一 个 单词 print。 不 过 我 们 还 可 以 用 CSS3 
媒体 查询 来 实现 这 个 目的 ， 使 用 的 语法 与 在 样式 表 中 伐 入 媒体 查询 类 似 。 





























你 只 需 以 only screen 开头 ， 将 查询 放 到 Link 元 素 的 media 属性 中 : 
«link rel="stylesheet" href="styles/mainstyles.css"> 


<link rel="stylesheet" href="styles/widerscreen.css" 
media="only screen and (min-width: 40em)"> 


在 这 里 ， 第 一 个 样式 表 应 用 于 所 有 设备 ， 而 第 二 个 样式 表 仅 在 查询 结果 为 真 〈 屏 幕 视 口 宽 
度 大 于 等 于 40 em) 时 应 用 。 


5.4 使 用 媒体 查询 的 其 他 方式 


我 们 刚 学 习 了 两 种 主要 的 媒体 查询 使 用 方法 ， 一 是 包含 媒体 查询 于 样式 表 中 ， 一 是 使 用 媒 
体 查询 链接 单独 的 样式 表 。 

这 两 种 方法 的 最 终结 果 是 一 样 的 ， 因 此 选择 哪 种 方法 来 组 织 CSS 更 多 的 只 是 个 人 喜好 
问题 。 

此 外 ， 还 有 另外 两 种 添加 媒体 查询 到 网 站 中 的 方法 ， 同 样 的 添加 CSS 的 备 选 方式 我 们 已 在 
第 4 章 中 学 习 过 。 


首先 ， 你 可 以 在 页 面 的 «style» 元 素 (<head> 元 素 内 ) 的 media 属性 中 包含 一 条 媒体 


查询 : 












































<style media-"only screen and (min-width: 40em)"> 
</style> 
这 样 就 意味 着 <style> 元 素 内 的 所 有 样式 仅 在 查询 为 真 时 应 用 。 


我 们 在 第 4 章 中 讲 过 应 用 样式 于 网 站 的 单个 页 面 通常 不 是 一 个 好 做 法 ， 因 此 可 能 的 话 也 不 
要 对 媒体 查询 使 用 这 种 方法 。 









































你 还 可 以 导入 一 个 样式 表 ， 做 法 类 似 于 链接 一 个 样式 表 : 


@import url(styles.css) only screen and (min-width: 
40em) 





一 般 来 说 ， 使 用 «link» 要 比 导 入 样式 表 更 可 取 。 


5.5 ”我们 可 以 查询 什么 


媒体 查询 能 够 查询 许多 可 能 的 媒体 特性 ， 如 视 口 的 宽度 和 高 度 、 屏 幕 宽 度 和 高 度 、 方 向 、 
宽 高 比 和 分 辨 率 (屏幕 每 个 维度 上 的 像素 个 数 )。 

其 中 的 大 多 数 特性 都 可 以 加 上 min- 或 max- 前 级 。 

不 过 ， 当 前 并 非 所 有 的 这 些 特 性 都 被 主流 浏览 器 所 支持 。 我 们 将 在 本 节 中 对 其 进行 更 细致 
地 讨论 。 此 外 ， 正 8 及 其 更 早 版 本 不 支持 任何 媒体 查询 。 在 本 章 的 稍 后 部 分 ， 你 将 学 习 如 
何 对 此 进行 处 理 。 

















5.5.1 视 口 宽度 和 高 度 
e width 

视 口 宽度 。 
* height 

视 口 高 度 。 


这 是 响应 式 设计 媒体 查询 中 最 常用 到 的 设备 特性 (宽度 比 高 度 更 常用 )。 


在 下 面 的 例子 中 ， 第 一 条 媒体 查询 询问 视 口 宽度 是 否 大 于 等 于 40 em。 第 二 条 媒体 查询 询 
问 视 口 高 度 是 否 正好 等 于 60 em (实际 不 太 可 能 不 用 min- 或 max-， 而 却 要 用 到 一 个 精确 
的 度量 值 ) : 

















Gmedia only screen and (min-width: 40em) { ... } 
Gmedia only screen and (height: 60em) ( ... ] 





在 进行 啊 应 式 设计 时 ， 尽 管 常常 谈 的 是 屏幕 尺寸 ， 但 正如 我 在 本 书 前 面 解释 的 那样 ， 我 们 
的 查询 实际 上 是 基于 视 口 大 小 ， 而 不 是 屏幕 尺寸 。 这 也 是 可 以 通过 改变 浏览 器 窗口 的 宽度 
来 查看 响应 式 设计 变化 的 原因 。 


视 口 是 浏览 器 窗口 中 实际 包含 网 页 的 那 部 分 区 域 。 可 以 看 一 下 你 的 浏览 器 窗口 ， 去 掉 页 面 
边 上 的 滚动 条 ， 以 及 顶部 或 底部 的 工具 栏 和 菜单 。 


























剩 下 的 区 域 就 是 视 口 。 
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即便 在 同一 块 显示 屏 上 ， 视 口 也 会 随 浏览 器 或 用 户 偏好 〈 比 如 使 用 哪些 工具 栏 ) 的 不 同 而 
发 生 改 变 。 不 同 浏览 器 侧 边栏 的 宽度 也 可 能 会 有 几 像素 的 差异 ， 或 者 用 户 未 将 窗口 最 大 
化 ， 这 些 都 会 对 视 口 造成 影响 。 











5.5.2 ”屏幕 宽度 与 高 度 


* device-width 
设备 屏幕 宽度 。 

* device-height 
设备 屏幕 高 度 。 


这 两 个 特性 的 作用 类 似 于 视 口 宽度 和 高 度 ， 除 了 它们 度量 的 是 设备 屏幕 的 实际 尺寸 而 不 是 
视 口 尺寸 。 因 此 ， 调 整 浏览 器 窗口 大 小 对 它们 不 会 有 影响 ， 并 且 如 果 用 户 没 有 将 窗口 最 大 
化 ， 他 可 能 不 会 获得 你 预期 的 布局 。 











示例 : 


Gmedia only screen and (max-device-width: 40em) ( ... } 


5.5.3 方向 
* orientation 


横 排 方向 (landscape) 或 竖 排 方向 (portrait). 


此 特性 表示 的 是 屏幕 的 方向 ， 是 模 排 (宽度 大 于 高 度 ) 还 是 竖 排 高度 大 于 宽度 )。 虽 然 
这 个 特性 可 能 会 很 有 用 ， 但 还 没有 浏览 器 对 其 提供 支持 。 


示例 : 


@media only screen and (orientation: landscape) ( ... } 


5.5.4 Siml 
e aspect-ratio 


视 口 宽 高 比 。 


* device-aspect-ratio 


设备 屏幕 宽 高 比 。 

















视 口 宽 高 比 或 设备 宽 高 比 是 指 宽度 相对 高 度 的 比例 。 因 此 ， 如 果 一 块 屏幕 宽 1000 像素 ， 
高 500 像素 ， 那 么 设备 屏幕 宽 高 比 就 是 2 : 1, 因为 1000 是 500 的 两 倍 。 屏 幕 宽 高 比例 有 很 
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多 种 ， 尽 管 乍 一 看 它们 几乎 都 是 相似 的 矩形 外 观 。 
常见 显示 器 的 宽 高 比 是 16 :9 (如 1920 x 1080 或 1366 x 768 像素 ) 或 者 16 : 10 (1280 


x 800), iPhone 3 和 iPhone 4S Æ 3 : 2 (480 x 320 和 960 x 640)， 而 iPhone 5 则 是 
16:9 (1136 x 640)。 安 卓 手 机 通常 是 4:3、3 :2、16 : 10 或 16: 9。 


示例 : 


Gmedia only screen and (device-aspect-ratio: 16/9) 


eui 
Gmedia only screen and (min-device-aspect-ratio: 
1920/1080) { ... } 


5.5.5 分辨 率 
e resolution 


设备 屏幕 的 分 辩 率 。 


resolution 有 点 类 似 于 老 的 媒体 查询 类 型 aevice-pixel-ratio， 但 已 经 取代 它 了 。 必 
这 对 在 屏幕 上 显示 恰当 分 辩 率 的 图 片 可 能 是 有 用 的 ， 但 它 尚未 被 Safari 和 Chrome 支持 。 





示例 : 


Gmedia only screen and (min-resolution: 300dpi) { ... } 


5.56 ”其 他 媒体 特性 
还 有 一 些 设备 特性 ， 虽 然 现 在 还 不 太 可 能 会 用 到 ， 但 以 后 或 许 会 频繁 使 用 ， 包 括 如 下 这 些 
设备 特性 。 





* color 
输出 设备 每 个 颜色 分 量 的 比特 位 数 。 可 用 min-color 对 一 个 数 (比特 位 数 ) 进行 查 
询 来 判断 颜色 性 能 。 而 只 用 color 这 个 词 则 是 询问 设备 是 否 为 彩色 屏幕 。 不 被 Opera 
支持 。 





e color-index 


设备 颜色 查找 表 中 的 条 目 数 ， 比 如 256, [X Opera 支持 。 


e monochrome 


设备 是 否 为 黑白 屏幕 (还 记得 黑 底 绿 字 的 老式 显示 器 屏幕 四 )。 疝 不 被 任何 浏览 器 支持 。 








e Scan 


设备 是 否 使 用 逐 行 扫描 ， 其 只 用 于 电视 。 尚 不 被 任何 浏览 器 支持 。 
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* grid 
输出 是 否 基于 网 格 (如 电 传 打字 机 ， 其 字体 宽度 固定 ) 或 位 图 (一 个 “标准 ”的 像素 屏 
幕 )。 疝 不 被 任何 浏览 器 支持 。 


5.6 浏览 器 支持 


所 有 这 些 媒体 查询 特性 看 上 去 都 很 不 错 ， 但 却 有 个 问题 : 某 些 浏览 器 根本 不 支持 媒体 查 
询 。 


因此 我 们 需要 确保 在 没有 加 入 媒体 查询 的 情况 下 ， 基 本 布局 和 设计 在 任何 设备 或 屏幕 尺寸 
上 都 能 工作 。 它 可 能 不 中 看 ， 但 却 可 用 。 





























功能 手机 是 不 支持 媒体 查询 的 。 对 此 就 体现 出 了 首先 为 小 屏幕 设计 的 一 个 好 处 ， 默 认 布局 
不 包含 媒体 查询 ， 因 此 能 够 在 不 支持 媒体 查询 的 小 屏幕 设备 上 工作 。 如 果 是 首先 为 宽屏 幕 
设计 ， 那 么 默认 的 为 宽屏 幕 而 设计 的 布局 在 这 些 设 备 上 仆 怕 就 无 法 使 用 了 。 


大 多 数 现代 浏览 器 基本 上 都 支持 媒体 查询 ， 至 少 支持 我 们 用 在 响应 式 设计 中 使 用 的 min- 
width fll max-width ( Z& ll “Can I Use CSS Media Queries ? ”, http://caniuse.com/css- 
mediaqueries)。 我 们 唯一 真正 需要 担心 的 浏览 器 是 正 8 及 其 更 早 版 本 。 




















幸运 的 是 ， 对 此 也 是 有 解决 方案 的 。 是 否 使 用 该 方案 取决 于 网 站 用 户 中 有 多 少 人 还 在 使 用 
IE8 或 其 更 早 版 本 。 如 果 人 数 比例 不 多 ， 给 他 们 默认 的 布局 设计 可 能 就 足够 了 。 尽 管 它 是 
用 于 小 屏幕 的 布局 (可 能 就 一 列 )， 但 一 样 能 用 在 更 大 的 屏幕 上 。 














5.6.1 IE 条 件 注释 


如 果 你 决定 网 站 需要 在 IE8 及 其 更 早 版 本 中 提供 对 媒体 查询 的 支持 ， 我 们 可 以 使 用 条 件 注 
ff (conditional comment) 使 代码 仅 针对 Internet Explorer, 

















这 样 做 的 缺点 是 会 为 网 站 增添 额外 的 代码 ， 而 增加 的 多 少 取决 于 你 实施 的 方案 。 








条 件 注释 也 是 一 种 查询 ， 但 它 出 现在 HTML 而 不 是 CSS 中 。 你 可 以 用 它 来 为 IE8 及 其 更 
早 版 本 指定 一 个 特定 的 样式 表 。 


条 件 注释 如 下 所 示 ，HTML 代码 放 在 中 间 : 











<!--[if (lt IE 9)&(!IEMobile)]> 
<! [endif] --> 


用 于 条 件 注释 的 代码 (那些 括号 和 标点 符号 ) 有 点 儿 难 记 ， 所 以 在 需要 时 最 好 是 直接 复制 
它们 ， 而 不 是 试图 强行 记 住 如 何 打出 这 些 代码 。 
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[i 








S 


第 一 行 其 实 是 说 : E IE DI 
(感叹 号 表示 “不 ”) IANI 


整个 内 容 在 一 对 HTML 注释 符号 (<!-- … -->) 中 开始 和 结束 ， 因 此 所 有 的 非 IE 浏览 
器 会 把 它 当 作 注 释 并 忽略 整个 内 容 。 而 IE 浏览 器 则 能 识别 出 这 是 一 个 需要 估 值 的 查询 。 




















器 版 本 号 低 于 (“lt*) 9， 且 不 是 用 于 移动 设备 的 全 Mobile 
器 应 该 采用 条 件 注 释 中 的 HTML 代码 。 否 则 忽略 。 


T 


I 


S 











虽然 可 以 使 用 条 件 注释 使 代码 只 用 于 IE8 及 其 更 早 版 本 ， 但 这 实际 上 并 没有 加 入 对 媒体 查 
询 的 支持 ， 那 么 我 们 如 何 确 定 将 哪些 代码 发 送 给 这 些 浏览 器 呢 ? 





这 实际 上 很 好 判断 。 因 为 条 件 广 释 排 除了 IE Mobile (移动 版 正 )， 那 么 可 得 知 使 条 件 注释 
生效 的 设备 几乎 肯定 是 台式 机 或 笔记 本 电脑 。 


再 孝 虑 到 常见 的 显示 器 尺寸 ， 屏 幕 一 般 至 少 有 1024 像素 宽 ， 甚 至 是 1280 像素 宽 。 这 样 我 
们 就 以 此 为 起 点 ， 在 条 件 注 释 中 包含 为 1280 像素 (80 em) 宽 的 视 口 准备 的 CSS 样式 表 或 
样式 ， 而 不 用 给 其 一 个 完全 不 同 的 布局 ， 如 此 也 就 基本 能 为 每 一 个 用 户 都 提供 大 致 准确 的 
布局 。 


因此 ， 如 果 要 让 TES 及 其 更 早 版 本 的 桌面 浏览 器 使 用 mid-size.css 样式 表 ， 只 需 在 网 页 
的 «head» 元 素 中 包含 以 下 代码 : 












































<!--[if (lt IE 9)&(!IEMobile)]> 
«link rel="stylesheet" href="midsize.css"> 
<! [endif] --> 


这 里 要 注意 的 是 ， 如 果 所 链接 的 用 于 特定 屏幕 宽度 的 样式 表 中 ， 样 式 是 包含 在 媒体 查询 中 
的 ， 这 些 样式 将 不 起 作用 (因为 条 件 注释 实际 并 未 加 入 对 媒体 查询 的 支持 ， 你 需要 将 样式 
从 中 提取 出 来 )。 


应 对 IE8 及 其 更 早 版 本 浏览 器 的 另 一 个 办 法 是 首先 以 默认 的 单列 视图 (所 有 媒体 查询 被 名 
略 时 浏览 器 采用 的 视图 ) 开始 ， 然 后 使 用 条 件 注 释 来 加 入 IE. 特定 布局 要 用 到 的 补充 样式 : 


























<!--[if (lt IE 9)&(!IEMobile)]» 
«link rel="stylesheet" href-"ie-styles.css"-» 
<! [endif] --> 


[ 小 贴 士 ] 

另 一 个 选择 是 用 腻子 脚本 为 旧版 本 的 下 添加 媒体 查询 支持 。 比 如 Respond.js ( https://github. 
com/scottjehl/Respond )， 一 个 快速 、 轻 量 级 的 为 于 6-8 添 加 min-width 和 max-width 支 
持 的 JavaScript 腻子 脚本 。 缺 点 是 会 增加 额外 的 代码 到 网 站 中 ， 在 不 支持 JavaScript 的 浏览 
器 中 不 起 作用 ， 且 只 能 用 于 min-wiath fe max-width 查询 。 





媒体 查询 | 95 


5.6.2 ”测试 媒体 查询 结果 

想 要 知道 浏览 器 回答 媒体 查询 的 结果 值 ， 你 可 访问 由 Viljami Salminen 创建 的 MQtest.io 网 
站 (http://mqtest.io/)。 如 图 5-1 所 示 ， 它 能 精确 告 之 浏览 器 发 送 的 高 度 、 宽 度 、 设 备 高 度 / 
宽度 、 屏 幕 宽 高 比例 、 方 向 和 分 辩 率 等 数值 。 你 可 以 在 调整 浏览 器 窗口 大 小 时 ， 观 察 宽度 
和 高 度 值 的 变化 。 如 果 媒 体 查询 在 某 个 设备 上 未 如 预期 地 起 作用 ， 通 过 这 个 网 站 你 可 以 很 
方便 地 判定 浏览 器 发 送 的 信息 是 否 与 你 假设 的 结果 值 相同 。 















































A simple tool to help identify which media 
queries your device responds to. 


Refresh tests (iteration: 25) 


1265px / 79.0625em 
831px / 51.9375em 

device-width 1280px / 80em 
device-height 1024px /64em 
device-pixel-ratio 
aspect-ratio 
device-aspect-ratio 
orientation 


resolution 


User agent 


Mozilla/5.0 (Macintosh; Intel Mac OS X 10.8; rv:27.0) Gecko/20100101 Firefox/27.0 


Built by - Source code is hosted at Some parts of the tests adopted from 
, and 





图 5-1: MOtest.io 网 站 将 向 你 显示 浏览 器 窗口 的 尺寸 


5.7 HA 

断 点 (breakpoint) 是 响应 式 设 计 中 的 重要 概念 ， 我 们 可 以 用 媒体 查询 在 断 点 处 改变 布局 设 
计 ， 使 设计 产生 两 个 〈 或 更 多 ) 的 变 体 。 

有 时 这 会 是 非常 明显 的 变化 ， 比 如 列 数 的 变化 〈 例 如 ， 在 40 em 宽度 时 从 一 列 变 成 两 列 )。 
有 时 又 会 是 非常 细微 的 变化 ， 比 如 微调 文字 大 小 来 更 好 地 适 配 屏幕 。 

考量 它 的 一 个 好 办 法 是 把 所 有 可 能 的 屏幕 尺寸 想象 成 一 排 ， 一 端 是 最 窗 的 屏幕 ， 一 端 是 最 
宽 的 屏幕 。 








在 图 5-2 中 ， 每 条 线 代表 一 个 断 点 ， 设 计 将 在 断 点 处 随 视 口 宽度 而 变化 。 





= 
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图 5-2: 每 条 线 代 表 一 个 断 点 





[小 贴 士 ] 
在 本 章 的 前 面部 分 你 已 经 学 到 了 媒体 查询 可 用 来 查询 各 种 媒体 特性 一 一 视 口 宽度 、 视 口 高 
度 、 方 向 、 长 宽 比 ， 甚 至 显示 器 是 否 是 彩色 的 。 


但 因为 width 是 目前 大 多 数 浏览 器 所 支持 的 唯一 媒体 特性 ， 它 也 基本 上 是 响应 式 设计 目前 
所 用 到 的 唯一 媒体 特性 。 因 此 ， 本 书 将 只 专注 于 使 用 宽度 属性 的 媒体 查询 。 


s * | -= 
5.8 ”设计 范围 
在 创建 响应 式 网 站 时 ， 我 们 趋向 于 将 注意 力 集中 在 断 点 之 上 ， 它 们 既是 我 们 添加 到 CSS 中 
的 一 些 数字 ， 也 是 事物 发 生变 化 的 触发 点 。 


虽然 断 点 十 分 重要 ， 但 它们 只 代表 了 一 小 部 分 视 口 宽度 ， 而 我 们 的 设计 应 该 在 任何 宽度 下 
都 有 良好 的 显示 效果 ， 而 不 仅仅 是 在 某 些 点 上 。 


因此 ， 就 引出 了 设计 范围 (design range) 的 概念 ， 也 就 是 两 个 断 点 之 间 所 涵盖 的 屏幕 尺寸 
范围 。 各 个 设计 范围 获得 各 自 不 同 的 布局 设计 变 体 。 


在 下 一 节 中 ， 我 们 将 添加 一 条 媒体 查询 到 网 页 中 ， 使 得 页 面 的 布局 设计 在 视 口 宽度 达到 36 
em 时 从 一 列 变 成 两 列 ， 这 就 产生 了 两 个 设计 范围 0-35 em (如 图 5-3 所 示 ) 与 36 em 至 无 
穷 大 (如 图 5-4 所 示 )。 而 实际 上 我 们 只 需 针对 最 小 240 像素 ( 约 15 em) 和 最 大 3200 像素 
( 约 200 em) 的 屏幕 宽度 做 设计 ， 因 此 两 个 设计 范围 最 终 将 分 别 是 15~35 em 和 36-200 em, 
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图 5-3. 页 面 在 15~35 em 设计 范围 内 的 一 些 示例 
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5-4. 页 面 在 36-200 em 设计 范围 内 的 一 些 示例 














在 图 5-3 和 图 5-4 中 只 给 出 了 每 个 设计 范围 内 几 个 点 的 截图 ， 书 中 无 法 给 出 所 有 可 能 视 
宽度 下 的 实例 页 面 截图 。 
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这 就 是 响应 原型 (你 将 在 第 7 章 中 学 习 ) 在 设计 过 程 中 如 此 有 用 的 原因 ， 你 可 以 在 浏览 器 
中 打开 原型 并 慢 慢 调整 浏览 器 窗口 大 小 来 观察 设计 在 各 个 屏幕 宽度 下 的 显示 效果 。 


当 添加 更 多 的 媒体 查询 到 示例 中 时 ， 我 们 的 设计 将 会 被 分 解 成 更 多 个 设计 范围 。 


5.9 响应 式 设计 


在 向 示例 站 点 添加 媒体 查询 之 前 ， 我 们 需要 先 讲 讲 构建 一 个 响应 式 网 站 的 最 佳 方式 。 


5.9.1 渐进 增强 

渐进 增强 (progressive enhancement) 的 理念 就 是 从 最 基本 的 开始 ， 然 后 再 在 此 基础 上 为 具 
有 更 强 性 能 的 浏览 器 和 设备 添加 功能 。 

我 们 的 默认 设计 (在 加 入 媒体 查询 之 前 ) 针对 的 是 最 小 的 屏幕 ， 同 时 它 也 需要 适用 于 最 基 
本 的 设备 一 一 那些 可 能 无 法 识别 媒体 查询 、CSS3 或 JavaScript 的 设备 。 


在 制作 一 个 网 站 时 ， 从 内 容 入 手 ， 以 HTML 定义 其 语义 结构 ， 这 是 第 一 层 。 所 有 浏览 器 都 
能 够 阅读 你 的 HTML, 


第 二 层 是 表现 层 。 在 表现 层 中 ， 我 们 用 css 样式 化 页 面 上 的 内 容 : 布局 、 颜 色 、 文 字 排 版 
等 等 。 有 些 浏 览 器 并 不 支持 所 有 的 CSS， 但 没有 它 站 点 仍 是 可 用 的 。 但 是 对 于 几乎 所 有 的 
浏览 器 而 言 ，CSS 使 得 网 站 有 更 棒 的 显示 效果 ， 网 站 的 内 容 更 易于 浏览 。 

第 三 层 是 行为 层 ， 是 用 JavaScript 来 达成 的 。 并 非 所 有 的 浏览 器 都 支持 JavaScript， 用 户 也 
可 能 出 于 安全 原因 而 将 其 关闭 。 虽 然 可 以 使 用 JavaScript 让 站 点 做 很 棒 的 事情 ， 比 如 活动 
菜单 ， 但 你 需要 确保 网 站 的 基本 功能 在 没有 JavaScript 的 情况 下 仍 能 正常 使 用 (而 这 对 强 
交互 网 站 也 许 是 不 可 能 的 ) 。 


不 要 设置 不 必要 的 技术 门槛 ， 这 只 会 赶 跑 用 户 。 


但 这 也 不 是 说 就 要 把 网 站 变 得 简单 无 趣 ， 不 添加 任何 装饰 。 只 是 说 要 尽 可 能 从 最 简单 的 网 
站 入 手 ， 并 确保 它 能 工作 ， 然 后 再 在 这 个 基础 上 添加 额外 的 功能 组 件 。 我 们 并 非 是 “为 最 
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低 标准 设计 ”( 这 是 对 渐进 增强 的 一 个 常见 批评 ) ， 只 是 从 最 低 标准 开始 ， 然 后 再 为 每 个 人 
进行 设计 。 

5.9.2 用 网 格 进行 设计 

现在 我 们 暂时 搁置 技术 问题 ， 来 谈 谈 如 何 决 定 内 容 出 现在 页 面 上 的 位 置 。 


在 创建 一 个 设计 的 过 程 中 会 涉及 很 多 内 容 ， 我 们 将 在 第 7 章 中 进一步 讨论 ， 在 这 里 我 们 只 
是 讲 一 下 如 何 用 网 格 和 列 来 编排 网 页 内 容 的 基础 知识 。 

















当 我 们 把 设计 整合 在 一 起 时 ， 需 要 考虑 设计 的 各 个 部 分 如 何在 屏幕 上 组 合 在 一 起 。 


响应 式 设计 和 常 被 描述 为 包含 了 “灵活 的 网 格 "。 但 实际 上 灵活 性 是 响应 式 设计 的 内 在 特性 ， 
网 格 并 不 是 必需 的 。 








不 过 ， 网 格 确实 是 创建 一 个 设计 精良 网 站 的 关键 。 


在 Khoi Vinh 的 《秩序 之 美 一 一 网 页 中 的 网 格 设 计 》 一 书 中 ， 他 解释 成 功 设计 的 目的 是 
“在 混沌 中 创造 秩序 ”。 使 用 网 格 ， 而 不 是 随意 创建 一 个 又 一 个 列 ， 赋 予 了 网 页 “秩序 、 连 
贯 与 和 谐 "， 使 得 网 页 更 具 视觉 吸引 力 ， 从 而 创造 出 更 愉悦 的 用 户 体验 。 


用 网 格 进行 设计 的 想法 来 源 于 平面 设计 。 网 格 意味 着 设计 是 由 多 个 同等 宽度 的 列 组 成 的 ， 
列 间 具 有 相同 的 间距 ， 页 面 上 的 所 有 内 容 都 是 基于 这 些 列 的 。 例 如 ， 图 5-5 是 一 个 基于 5 
列 的 文字 排版 网 格 。 
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图 5-5: 一 个 5 列 空 网 格 和 以 此 为 基础 的 布局 示例 


你 可 以 看 到 网 格 有 5 列 并 不 意味 着 整个 设计 也 要 被 分 成 5 列 ， 网 格 列 可 以 被 合并 来 创建 布 
局 中 真正 的 “ 列 ”。 
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5.9.8 ”使 用 网 格 列 
很 多 网 站 都 使 用 12 列 网 格 ， 因 为 它 具 有 很 大 的 灵活 性 : 12 REI 2, 3, 4. 6 整除 ， 因 此 你 
的 布局 中 可 以 包含 使 用 任意 这 些 列 数 的 内 容 部 分 ， 即 便 是 都 在 同一 页 面 上 。 











比如 图 5-6 (Æ) 所 示 的 Monocle 网 站 建立 在 一 个 12 列 的 网 格 之 上 。 你 可 以 看 到 页 面 的 不 
同 部 分 有 不 同 的 列 数 ， 但 是 各 部 分 加 起 来 总 是 等 于 12。 例 如 ，4 等 列 是 3/12 + 3/12 + 3/12 + 
3/12， 而 3 等 列 是 4/12 + 4/12 + 4/12。 























5-6: Monocle 网 站 建立 在 一 个 12 列 网 格 之 上 (£), m Yahoo! 网 站 则 是 满 页 散乱 的 列 ( 右 ) 
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即使 向 下 滚动 页 面 会 看 到 不 同 的 列 数 ， 但 它们 是 连贯 而 有 序 的 。 


当然 ， 在 响应 式 站 点 上 ， 这 些 内 容 块 可 以 轻松 地 在 不 同 的 视 口 宽度 下 重 排 ， 以 便 它们 适应 
相同 的 或 不 同 的 网 格 。 














我 们 来 对 比 Monocle 和 Yahoo! 的 视觉 凝聚 力 。 如 图 5-6 (A) 所 示 ，Yahoo! 的 各 内 容 组 
成 部 分 看 上 去 像 是 随机 放置 在 一 起 。 因 此 我 在 页 面 中 加 上 线条 来 勾 划 出 页 面 不 同 部 分 中 的 
列 数 。 


在 本 章 的 稍 后 ， 我 们 将 用 示例 站 点 演示 如 何 使 用 网 格 来 决定 各 列 应 该 显示 在 页 面 的 什么 
位 置 。 



































[ 小 贴 士 ] 
要 想 更 多 地 了 解 如 何在 响应 式 网 站 中 使 用 网 格 ， 参 阅 CSS-Tricks 上 Chris Coyier 撰写 的 
"Don't Overthink It Grids” ( http://css-tricks.com/dont-overthink-it-grids/ ) 一 文 。 





如 果 你 想 深入 研究 基于 网 格 的 设计 理论 和 方法 ， 请 阅读 Khoi Vinh 所 著 的 《秩序 之 美 网 


页 中 的 网 格 设计 》 一 书 (http://grids.subtraction.com/ )。 


5.9.4 优先 为 小 屏幕 设计 

当 用 媒体 查询 基于 不 同 的 视 口 宽度 改变 网 站 设计 时 ， 通 常会 在 两 个 彼此 相对 的 方向 中 选择 
一 个 来 开始 工作 ， 要 么 让 默认 设计 从 最 小 的 视 口 宽度 开始 ， 然 后 为 更 大 的 宽度 添加 媒体 查 
询 。 要 么 让 默认 设计 从 最 大 的 视 口 宽度 开始 ， 然 后 添加 媒体 查询 用 于 较 小 的 宽度 。 














一 般 来 说 ， 应 优先 为 小 屏幕 设计 。 尽 管 按 桌 面 尺寸 进 行 网 站 设计 可 能 更 舒服 ， 也 更 容易 ， 
但 从 最 小 屏幕 宽度 开始 设计 将 迫使 你 关注 内 容 并 只 包含 真正 所 需要 的 内 容 。 

而 且 创 建 一 个 布局 之 后 再 将 它 变 大 要 比 把 它 变 小 容易 得 多 。 在 你 为 窗 视 口 创建 了 一 个 漂亮 
的 布局 之 后 ， 在 更 宽 的 屏幕 上 你 就 有 了 足够 的 空间 去 折腾 内 容 并 给 它们 更 大 的 空间 ， 但 如 
果 你 党 试 把 一 个 桌面 尺寸 站 点 的 所 有 内 容 硬 塞 进 小 屏幕 中 ， 那 这 将 会 变 得 十 分 困难 。 


如 果 你 看 下 第 4 章 中 我 们 的 示例 站 点 ， 你 会 发 现 我 们 已 有 一 个 能 工作 于 所 有 尺寸 屏幕 的 布 
局 ， 并 在 手机 小 屏幕 上 有 具有 最 佳 的 显示 效果 (图 5-7)。 
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to more than 150 giant pandas. It's one of 
the key sites for panda breeding research, 
and 66 cubs have been born at Wolong 
since it was established in 1980. Pandas 
are an endangered species, with between 
1500 and 3000 living in the wild, and 
less than 300 in captivity (research 
centers and zoos). 
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e Pandas Unlimited 
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图 5-7: 示例 站 点 在 窒 屏 (手机 屏幕 ) 上 的 显示 效果 
我 们 将 秉承 这 种 设计 并 加 入 媒体 查询 以 使 其 在 所 有 的 屏幕 尺寸 上 都 有 良好 的 显示 效果 。 


5.10 使 用 媒体 查询 


断 点 的 设置 是 随意 的 。 你 项 至 可 以 从 零 开 始 为 网 站 设置 任意 多 个 断 点 。 那 么 合适 的 起 点 是 
什么 呢 ? 最 初 的 设计 规划 可 以 帮 你 大 致 了 解 需要 多 少 断 点 ， 但 你 需要 转 到 浏览 器 上 才能 实 
际 找 出 添加 媒体 查询 的 最 佳 位 置 ， 在 这 个 点 上 我 们 的 设计 将 会 拆 分 成 两 个 设计 范围 。 





我 们 先 从 最 窗 宽 度 开 始 ， 看 看 示例 网 站 在 浏览 器 中 的 显示 效果 ， 然 后 慢 慢 调 宽 浏 览 器 窗 
口 ， 来 观察 会 发 生 什么 。 


5.11 两 列 布局 

我 们 首先 只 关注 文章 部 分 和 每 行 字 符 数 (在 第 10 章 ， 我 们 将 更 改 页 面 导航 及 其 他 页 面 组 
成 部 分 )。 你 会 在 第 9 章 中 知晓 每 行文 本 的 最 佳 阅 读 字数 是 45 至 75 个 字符 。 这 并 不 是 一 
个 必须 遵守 的 规则 ， 但 如 果 字 数 不 在 这 个 范围 内 ， 通 常会 降低 阅读 的 舒适 性 。 












































A 
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在 最 罕 屏 幕 宽 度 上 ， 每 行 有 45 个 字符 ， 这 虽 处 于 最 佳 字数 范围 的 下 限 ， 但 还 是 不 错 的 。 











而 在 更 大 的 屏幕 上 浏览 网 站 时 ， 我 们 希望 每 行 字符 不 超过 75 个 。 为 了 找到 这 个 点 ， 我 们 
慢 慢 调 大 浏览 器 窗口 宽度 ， 直 到 每 行 字数 达到 TS 个 字符 。 如 图 5-8 所 示 ， 我 们 需要 在 那 添 
加 一 个 断 点 。 
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Pandas in Wolong 


The Wolong National Nature Preserve, in the Sichuan Province of China, is 
home to more than 150 giant pandas. It's one of the key sites for panda 
breeding research, and 66 cubs have been born at Wolong since it was 
established in 1980. Pandas are an endangered species, with between 1500 
and 3000 living in the wild, and less than 300 in captivity (research centers 
and zoos). 
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58: 一 旦 每 行 超过 75 个 字符 ， 就 添加 一 个 断 点 











如 果 在 那个 点 上 测量 下 视 口 宽度 ， 我 们 会 发 现 它 大 约 为 36 em 宽 。 做 这 件 事 最 简单 的 方法 
就 是 用 像 MQtest.io (http://mqtest.io/) 这 样 的 工具 在 同一 个 浏览 器 窗口 中 打开 一 个 标签 页 。 
切换 到 那个 标签 页 ，MQtestio 会 告诉 我 们 窗口 当前 的 宽度 值 。 








你 可 以 将 此 值 四 舍 五 人 人， 只 要 每 行 平均 有 75 个 字符 就 行 ， 并 不 需要 一 个 非常 精确 的 值 。 


5.11.1 使 用 浮动 
现在 ， 我 们 想 要 在 这 个 宽度 上 改变 布局 让 内 容 分 成 两 列 显示 。 我 们 首先 重 温 下 布局 所 需 的 
CSS， 然 后 添加 一 条 媒体 查询 告诉 浏览 器 仅 在 视 口 宽度 大 于 等 于 36 em 时 才 应 用 此 CSS. 


我 们 把 文章 部 分 (<article> 元 素 ) 放置 在 较 宽 的 一 列 中 ， 并 浮动 («£1oat» 属性 ) 至 
页 面 左 边 ， 相 关 链 接 部 分 («aside» 元 素 ) 将 放 在 较 罕 的 那 一 列 ， 并 浮动 至 页 面 右边 。 然 
后 为 页 脚 添加 清除 浮动 («clears 属性 ) 样式 ， 使 其 另 起 一 行 。 


我 们 希望 看 到 的 效果 如 图 5-9 所 示 。 
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The Wolong National Nature Preserve, in the Sichuan 
Province of China, is home to more than 150 giant 
pandas. It's one of the key sites for panda breeding 
research, and 66 cubs have been born at Wolong since it 
was established in 1980. Pandas are an endangered 
species, with between 1500 and 3000 living in the wild, 
and less than 300 in captivity (research centers and 
zoos). 
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图 5-9. 在 这 个 断 点 处 我 们 将 使 布局 变 成 两 列 
所 用 的 CSS 样式 如 下 : 
article { float: left; } 


aside { float: right; ) 
footer { clear: both; } 


然而 ， 当 我 们 加 上 CSS 后 ， 会 发 现 显 示 结 果 并 不 正确 ， 如 图 5-10 所 示 。 








Pandas Forever 


Home 
About 
Links 





.... 





Contact 








Pandas in Wolong 


The Wolong National Nature Preserve, in the Sichuan Province of China, is 
home to more than 150 giant pandas. It's one of the key sites for panda 
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and 3000 living in the wild, and less than 300 in captivity (research centers 
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图 510: 由 于 未 指定 宽度 ， 文 章 撑 满 整个 页 面 宽度 ， 致 使 相关 链接 被 挤 到 它 的 下 方 
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问题 在 于 ， 当 浮动 一 个 块 级 元 素 时 ， 其 默认 宽度 值 变 成 了 auto (自动 宽度 )， 表 示 元 素 的 
宽度 将 根据 其 所 包含 的 内 容 的 需求 自动 调整 。 对 于 文章 部 分 ， 它 有 足够 的 文本 来 撑 满 整个 
屏幕 宽度 ， 所 以 它 仍 和 之 前 一 样 宽 。 然 而 ， 对 于 相关 链接 部 分 ， 其 所 包含 内 容 需 要 的 宽度 
很 窗 ， 因 此 其 自动 宽度 也 是 很 罕 的 。 


5.11.2 ”使 用 网 格 

要 解决 这 个 问题 ， 需 要 手工 指定 这 两 个 元 素 的 宽度 。 我 们 将 用 网 格 系统 算出 它们 各 自 应 该 
是 多 宽 。 

所 有 的 宽度 都 是 基于 百分比 的 。 我 们 将 使 用 四 列 网 格 ， 每 列 的 宽度 是 21%， 列 间距 是 2%， 


加 上 左右 两 边 各 5% 的 外 边 距 。 所 有 的 数 加 起 来 正好 是 100%， 即 整个 页 面 的 宽度 。 你 可 
以 在 图 5-11 中 看 到 计算 出 的 各 部 分 所 占 百 分 比 。 










































































5% 21€ [2] 21 BI 21€ 2 21€ 5% 
67% 21% 
Pandas in Wolong Related 
The Wolong National Nature Preserve, in the Sichuan Province of China, is home Links 
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图 5-311: 页 面 分 为 等 宽 的 四 列 ， 具 有 相同 的 间距 


左边 的 列 ， 对 应 «article» 元 素 ， 占 据 三 列 宽度 。 三 列 的 宽度 加 上 列 间 距 的 宽度 合计 是 
67%。 右 边 的 列 则 为 页 面 总 宽度 的 21%， 两 列 间 有 2% 的 间隔 。 让 我 们 添加 左右 两 列 的 宽 
度 到 CSS 中 : 





article { float: left; width: 67$; } 

aside { float: right; width: 21$; } 

footer { clear: both; } 
现在 距离 目标 越 来 越 近 了 ， 但 仍 有 一 个 问题 ， 各 列 本 应 该 是 并 排 紧 靠 的 ， 但 由 于 两 列 的 间 
隔 宽度 设置 有 误导 致 了 如 图 5-12 所 示 问 题 的 发 生 。 








现在 ， 文 章 列 宽 度 是 67%， 加 上 左 、 右 两 边 5% 的 边 距 。 相 关 链 接 列 宽度 是 21%， 加 上 
左 、 右 两 边 5% 的 边 距 。 所 有 的 数字 加 起 来 达到 了 108% 一 一 这 就 是 它们 不 能 并 排 在 一 起 
的 原因 。 两 列 之 间 的 间隔 应 该 只 有 2%， 而 不 是 10%。 











那么 将 两 列 间 的 间隔 减 小 就 对 了 ， 因 此 我 们 把 文章 列 的 右边 距 和 相关 链接 列 的 左边 距 都 设 
置 为 0: 





article { width: 67$; float: left; margin-right: 0; ) 
aside ( width: 21$; float: right; margin-left: 0; } 
footer { clear: both; } 
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图 5-12: 相关 链接 处 于 文章 的 下 边 ， 而 正确 的 位 置 应 该 并 排 挨 着 文章 

这 样 所 有 宽度 加 起 来 是 98%， 还 余下 了 2% 的 宽度 。 因 为 文章 列 总 是 处 于 左边 ， 相 关 链 接 
列 总 是 处 于 右边 ， 无 需 特别 指明 ， 这 余下 的 2% 就 成 了 两 列 的 间隔 。 现 在 我 们 获得 了 如 图 
5-13 所 示 的 显示 效果 。 


现在 布局 的 显示 效果 已 是 令 人 满意 的 。 如 果 你 打算 调整 各 列 的 宽度 ， 或 者 它们 之 间 的 间隔 
宽度 ， 只 需 修 改 下 百分比 值 即 可 。 


不 过 对 于 此 布局 ， 我 们 希望 仅 在 视 口 宽度 大 于 等 于 36 em 时 才 应 用 它 ， 所 以 还 需要 使 用 一 
条 媒体 查询 来 实现 这 个 目标 。 
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& 5-13: 相关 链接 部 分 现 处 在 了 正确 的 位 置 
5.11.3. ”加 入 媒体 查询 


加 在 此 处 的 媒体 查询 是 非常 简单 的 。 我 们 希望 断 点 发 生 在 36 em 时 ， 所 以 要 告诉 浏览 器 ， 
如 果 视 口 最 小 宽度 达到 36 em， 则 应 该 应 用 刚 加 入 的 这 三 行 新 的 CSS 样式 。 


如 有 果 视 口 宽 度 大 于 等 于 36 em， 浏览 器 将 应 用 这 些 CSS 来 生成 一 个 两 列 布局 。 如 有 果 小 于 36 
em， 它 将 忽略 媒体 查询 中 的 CSS， 并 保持 我 们 初始 的 单列 布局 不 变 。 你 可 以 在 图 5-14 中 


比较 两 个 布局 。 以 下 是 实现 代码 : 








Gmedia only screen and (min-width: 36em) { 


article ( width: 67$; float: 


aside ( width: 21$; float: 
footer { clear: both; } 


left; margin-right: 0; } 
right; margin-left: 0; } 
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图 5-14. 这 是 我 们 目前 拥有 的 两 个 布局 ， 分 别 用 于 窄 于 和 宽 于 96 em 的 视 口 宽度 
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If, (E 36 em 宽度 处 ， 页 面 将 从 一 种 布局 变 成 另 一 种 布局 。 


5.12 设置 最 大 宽度 


很 好 ， 现 在 我 们 再 次 使 每 行 字数 保持 在 了 一 个 良好 的 水 平 ， 但 当 我 们 继续 调 宽 视 口 ， 大 慨 
在 63 em 处 时 ， 每 行 的 字数 又 超出 了 最 佳 范围 。 


对 于 一 个 标准 的 网 站 ， 我 们 可 以 在 这 个 断 点 上 添加 第 三 列 ， 但 对 于 简单 的 示例 网 站 ， 我 们 
没有 可 用 于 第 三 列 的 内 容 。 


那么 另 一 种 可 能 性 就 是 在 某 个 点 上 阻止 整个 页 面 布局 继续 扩大 。 这 个 设计 决策 可 能 会 引发 
争议 ， 因 为 对 于 非常 宽 的 屏幕 将 会 留 下 很 大 的 空白 ， 但 在 我 们 的 例子 中 ， 页 面 的 内 容 不 
多 ， 所 以 事实 上 也 没有 其 他 选择 了 。 


要 限制 页 面 布局 宽度 ， 最 简单 的 方法 就 是 把 所 有 内 容 放 入 一 个 元 素 中 。 因 此 我 们 将 添加 
一 个 «div» 元 素 ， 用 它 包 于 页 面 上 的 所 有 内 容 (它们 包含 在 <body> 标记 中 )， 并 赋予 
«div» 的 id 属性 为 £ullpage, 

































































然后 我 们 会 用 到 CSS 属性 max-width (你 将 在 第 6 章 中 学 到 更 多 有 关 它 的 知识 )。 对 响应 
式 设计 中 的 图 片 ， 我 们 会 使 用 这 个 属性 并 设置 其 值 为 100%， 以 确保 显示 的 图 片 不 会 超出 
它们 的 包含 元 素 。 








实际 上 可 以 在 任何 元 素 上 使 用 max-wiath 属性 ， 你 也 可 以 给 它 指定 一 个 数值 ， 而 不 是 
百分比 。 在 这 里 ， 我 们 将 使 <aiv> 元 素 包 于 整个 页 面 内 容 ， 并 给 它 一 个 样式 声明 max- 
width:63 em， 这 表示 无 论 视 口 有 多 宽 ， 这 个 <div> 元 素 的 宽度 永远 都 不 会 超出 63 em: 




















#fullpage { max-width: 63em; } 
































果然 ， 当 我 们 使 浏览 器 窗口 宽 于 63 em 时 ， 布 局 不 会 再 变 宽 。 如 图 5-15 所 示 。 
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5-15. 在 宽度 超出 63 em 时 ， 页 面 布 局 不 再 变 宽 





此 外 还 有 一 件 事 ， 就 是 我 们 的 页 面 布局 自 始 自 终 是 与 视 口 左边 对 齐 的 ， 导 致 视 口 右边 一 大 
片 空白 。 如 果 能 在 屏幕 上 居中 显示 会 更 好 些 。 要 做 到 这 一 点 ， 我 们 只 需 设置 «div» 元 素 
的 外 边 距 属 性 值 为 auto， 这 将 导致 布局 的 左右 外 边 距 平分 空白 区 域 从 而 使 页 面 布局 居中 。 
如 图 5-16 所 示 。 











#fullpage { max-width: 63em; margin: auto; ) 
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图 5-16: 布局 现在 居中 于 屏幕 


5.13 如何 选 择 断 点 


我 们 已 知道 ， 可 以 在 任 一 浏览 器 宽度 上 添加 断 点 。 在 设计 初步 的 草图 时 ， 你 可 能 会 对 在 什 
么 位 置 设置 断 点 有 一 个 大 致 的 想法 ,但 在 浏览 器 中 实际 测试 你 的 CSS 之 前 ， 是 很 难 确切 地 
知道 需要 要 在 何 处 设置 断 点 的 。 在 第 7 章 中 ， 我 们 将 对 设计 流程 中 的 这 一 步骤 做 更 深 入 的 
讨论 。 




















有 些 设 计 师 选择 让 断 点 匹配 于 常见 的 诸如 iPhone 和 iPad 这 样 的 设备 的 屏幕 尺寸 。 但 那么 
故 只 会 导致 你 将 注意 力 集中 于 每 个 断 点 处 的 显示 效果 ， 而 你 实际 需要 关注 的 是 各 个 设计 范 
围 内 的 所 有 视 口 宽度 下 的 显示 效果 。 









































当然 ， 你 尤其 需要 保证 设计 在 网 站 访问 者 大 量 使 用 的 那些 设备 上 有 良好 的 显示 效果 ， 虽 然 
你 的 目标 并 不 只 是 为 了 这 些 设备 ， 而 是 要 创建 一 个 在 所 有 设备 上 都 有 良好 显示 效果 的 设计 
(不 管 设备 的 视 口 宽度 是 什么 )。 


那么 完全 不 考虑 设备 吗 ? 不 是 的 ， 设 备 仍然 很 重要 ， 只 是 你 不 应 该 首先 考虑 它们 。 在 一 开 
台 最 好 是 不 要 只 考虑 页 面 设计 在 特定 设备 上 的 显示 效果 ， 而 是 应 该 从 更 通用 的 访问 设备 ， 
比如 手机 尺寸 、 平 板 电脑 尺寸 及 桌面 显示 器 尺寸 去 考虑 它 。 



















































































在 通过 调整 浏览 器 宽度 观察 设计 变化 并 确定 了 断 点 之 后 ， 再 在 一 些 设备 上 测试 显示 效果 。 
这 时 你 可 以 稍微 调整 一 下 断 点 ， 因 为 它 基于 每 行 字符 数 设 定 ， 所 以 不 必 那 么 精确 。 
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例如 ， 如 有 果 iPad 宽度 与 断 点 只 差 几 个 像素 ， 你 可 以 微调 断 点 以 使 iPad 落 入 到 不 同 的 设计 
范围 中 一 一 比如 ， 从 单列 布局 变 成 两 列 布局 。 

记 住 下 面 的 话 ， 这 真 的 很 重要 ， 所 以 我 要 再 次 重申 一 下 
中 的 显示 效果 ， 而 不 是 在 每 个 断 点 上 的 显示 效果 。 











ig 


重要 的 是 设计 在 每 个 设计 范围 











5.14 总 结 


媒体 查询 允许 你 基于 浏览 网 站 的 设备 的 特性 来 应 用 不 同 的 样式 声明 。 这 是 响应 式 设计 的 关 
键 所 在 ， 其 使 得 依据 屏幕 的 尺寸 让 用 户 看 到 不 同 的 网 站 设计 或 布局 成 为 可 能 


尽管 媒体 查询 功能 强大 ， 但 实际 使 用 起 来 却 非常 简单 。 从 对 设备 提出 询问 ( 称 作 表 达 式 ) 
开始 ， 如 果 表 达 式 结果 为 真 ， 媒 体 查 询 中 的 CSS 被 应 用 。 如 果 表 达 式 结果 为 假 ， 媒 体 查询 
内 的 css Xp Zu, 


通过 使 用 媒体 查询 ， 对 于 一 个 特定 的 样式 ， 你 一 开始 可 以 对 网 站 应 用 默认 值 ， 然 后 再 根据 
视 口 宽度 用 不 同 的 值 覆盖 掉 默 认 值 。 


媒体 查询 可 以 直接 包含 在 样式 表 内 ， 也 可 以 用 来 链接 一 个 单独 的 样式 表 ， 在 后 一 种 情况 
下 ， 整 个 样式 表 仅 在 媒体 查询 为 真 时 才 被 应 用 于 页 面 。 


在 响应 式 设计 中 ， 媒 体 查 询 通常 只 用 来 查询 视 口 宽度 ( 即 浏 览 器 窗口 中 实际 包含 网 页 的 那 
部 分 区 域 )。 视 口 在 台式 机 和 笔记 本 电脑 上 是 可 变 的 ， 因 为 用 户 可 以 改变 浏览 器 窗口 的 大 
小 。 在 移动 设备 上 ， 视 口 宽 度 不 会 变化 ， 它 与 屏幕 宽度 相同 


还 有 一 些 其 他 的 媒体 特性 也 可 以 被 查询 ， 如 方向 、 宽 高 比 、 分 状 率 ， 但 因为 这 些 特性 并 不 
被 主流 浏览 器 一 致 支持 ， 所 以 它们 目前 并 不 常用 。 这 种 情况 在 将 来 可 能 会 发 生 改 变 。 视 口 
宽度 查询 是 被 所 有 主流 浏览 器 支持 的 ， 但 是 不 包括 IE8 及 其 更 早 版 本 ， 它 们 需要 用 条 件 注 
释 或 腻子 脚本 来 应 用 正确 的 样式 。 


断 点 是 媒体 查询 中 反应 视 口 宽度 的 数值 点 ， 网 页 设计 在 断 点 上 将 一 分 为 二 变 成 两 种 变 体 。 
断 点 之 间 的 空间 称 为 设计 范围 ， 在 此 范围 内 的 视 口 宽度 对 应 一 种 设计 变 体 。 
为 网 站 添加 媒体 查询 时 ， 先 从 最 小 的 屏幕 宽度 开始 ， 然 后 再 自 下 而 上 地 为 更 大 的 屏幕 与 设 


备 进行 渐进 增强 是 最 为 容易 的 。 此 外 不 管 屏幕 是 何 尺 寸 ， 我 们 都 可 以 用 网 格 来 增添 设计 的 
ys 凝聚 力 。 



































































































































在 选择 断 点 时 ， 不 应 选择 将 断 点 设置 为 与 菜 些 常见 设备 宽度 相同 ， 而 是 应 该 确保 常见 设备 
宽度 能 够 很 简单 地 落 入 到 某 一 设计 范围 之 内 。 你 可 以 在 各 类 设备 上 对 设计 进行 测试 并 以 此 
来 调整 断 点 。 


在 下 一 章 中 ， 我 们 将 学 习 如 何在 响应 式 网 站 中 租 入 图 片 。 
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第 6 章 





EI 





到 目前 为 止 ， 我 们 已 了 解 如 何 创建 网 页 ， 知 道 如 何 添 加 基本 的 样式 ， 以 及 如 何 根 据 视 口 宽 
度 用 媒体 查询 调整 页 面 布局 。 


但 是 如 果 不 在 网 页 上 放 些 图 像 ， 页 面 看 起 来 会 很 单调 。 





你 很 可 能 听 说 过 在 响应 式 网 站 中 加 入 图 像 是 件 多 么 多 么 复杂 的 事 ， 因 为 图 像 并 非 总 是 以 同 


FERT Lon. JJ 








BA, ， 如 何 确保 不 会 浪费 带宽 向 小 屏幕 设备 发 送 大 图 像 呢 ? 








我 们 又 如 何 确保 发 送 合适 的 高 清 图 像 给 高 密度 (视网膜) 屏幕 呢 ? 














这 是 响应 式 设计 仍 待 解 决 的 一 部 分 内 容 。 我 们 将 在 这 里 讨论 一 些 常用 的 解决 方案 ， 但 是 每 
种 方案 都 存在 若干 缺陷 ， 没 有 一 种 是 完美 的 。 在 未 来 几 年 中 这 一 领域 很 可 能 会 出 现 新 的 思 
路 ， 那 也 许 会 改变 我 们 在 响应 式 网 站 中 处 理 图 像 的 方式 。 























在 此 期 间 ， 我 们 将 从 本 章 的 基本 概念 人 手 展 开 介 绍 ， 包 括 优 化 用 于 网 页 的 图 像 。 当 对 文本 








应 用 CSS 样式 可 以 实现 相同 的 效果 时 就 不 要 使 用 图 像 ， 在 适当 时 还 可 使 用 图 标 字体 等 其 他 
的 解决 方案 。 务 必 为 图 像 设置 好 的 替代 (alb) 文本 ， 使 图 像 对 于 任何 人 都 是 可 访问 (无 障 


WR) 的 。 


















































在 决定 网 站 上 响应 式 图 像 的 最 佳 处 理 方式 时 ， 你 需要 对 比 不 同 的 可 选 方 案 并 找 出 适合 自己 








的 方案 。 如 果 未 在 网 站 中 实施 响应 式 图 像 解决 方案 ， 那 么 网 站 的 加 载 可 能 需要 化 费 较 长 的 





























时 间 。 这 虽然 不 是 最 理想 的 ， 但 只 要 不 是 有 非常 多 的 大 图 像 ， 那 也 并 非 世界 末日 。 还 有 一 





些 其 他 的 方法 可 用 来 减少 页 面 重量 (页 面 显示 所 需要 的 所 有 文件 总 共 的 大 小 )， 我 们 将 在 





























第 11 章 中 进行 讲解 。 
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为 高 密度 屏幕 提供 高 清 图 像 也 是 件 复杂 的 事 
通 图 像 也 可 以 ， 只 不 过 没有 那么 清晰 。 

最 重要 的 是 ， 你 需要 对 响应 式 图 像 领域 的 新 动向 保持 关注 ， 从 而 确保 能 第 一 时 间 用 上 那些 
即将 出 现 的 新 思路 和 新 解决 方案 。 





青 ， 但 如 果 做 不 到 也 没什么 大 不 了 的 。 使 用 普 





[小 贴 士 ] 
在 本 章 中 我 们 会 时 常 谈 到 图 像 的 尺寸 。 在 此 场景 下 ， 我 们 使 用 “重量 ”表示 图 像 的 文件 大 小 
(通常 以 千 字 节 ， 即 KB 计算 )， 而 使 用 “尺寸 ” 指 代 图 像 的 高 度 和 宽度 以 避免 混乱 。 


6.1 显示 图 像 的 方式 


依据 图 像 的 用 途 ， 我 们 有 数 种 方法 可 用 来 向 网 站 中 添加 图 像 。 





6.1.1 CSS 替代 方案 

在 向 网 站 中 添加 图 像 之 前 ， 首 先 应 考虑 是 否 真 的 需要 使 用 所 有 那些 图 像 。 

例如 ， 使 用 CSS 可 以 为 按钮 及 其 他 元 素 添加 边框 、 阴 影 和 渐变 效果 (如 图 6-1 所 示 )。 直 
到 最 近 ， 这 类 装饰 效果 还 常常 使 用 图 像 来 实现 。 但 现在 可 以 使 用 CSS 来 获得 相同 的 效果 ， 
这 意味 着 网 页 可 以 下 载 更 少 的 图 像 (也 意味 着 更 小 的 页 面 重量 )。 

































































图 6-1: 用 CSS 而 非 图 像 编 辑 软件 创建 的 按钮 


此 外 ， 对 于 按钮 这 类 元 素 ， 可 使 用 CSS 样式 而 不 是 用 图 像 去 装饰 ， 此 后 要 想 在 全 站 范围 内 
改变 颜色 及 其 他 样式 就 很 方便 ， 只 需 改 下 CSS， 而 不 必 重 建 每 个 图 像 。CSS 样式 化 的 元 素 
也 更 具 响 应 性 ， 改 变 它们 的 大 小 并 不 会 降低 其 显示 质量 。 

















并 不 是 所 有 的 老式 浏览 器 都 支持 这 些 CSS 样式 属性 ， 但 使 用 这 些 浏 览 器 的 小 部 分 用 户 仍 将 
获得 可 用 的 按钮 ， 只 不 过 是 可 能 没有 圆 角 或 阴影 效果 。 

创建 类 似 按钮 效果 的 代码 比较 复杂 ， 但 如 果 在 网 上 搜索 “CSS 按钮 生成 器 ”(CSS button 
generator) 你 会 找到 很 多 的 网 站 ， 它 们 让 你 可 以 通过 组 合 搭配 所 有 可 能 的 CSS 属性 值 来 设 
计 一 个 按钮 ， 然 后 为 你 生成 所 需 的 CSS 代码 ， 供 你 复制 并 粘贴 到 自己 的 样式 表 中 。 


你 还 可 以 在 网 站 上 使 用 CSS 而 不 是 用 图 像 实现 艺术 字 效 果 。 几 乎 所 有 可 以 在 图 像 编辑 软件 
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中 对 文字 所 做 的 事 ， 比 如 轮 廊 文字、 垂直 侧 转 文字 等 效果 在 CSS 中 都 可 以 实现 。 利 用 这 一 
点 ， 你 可 以 确保 样式 化 文本 是 响应 式 的 同时 也 是 可 访问 (无 障碍 ) 的 。 


不 过 ， 对 于 像 公 司 标志 (ogo) 这 样 的 事物 ， 需 要 总 是 具有 完全 相同 的 显示 效果 ， 那 最 好 
还 是 使 用 图 像 以 确保 它 的 所 有 细节 都 能 正确 地 显示 出 来 。 




















6.1.2 内容 图 像 
内 容 图 像 是 那些 向 用 户 传达 意义 的 图 像 ， 它 们 要 么 是 网 站 信息 的 一 部 分 (比如 报纸 文章 配 
图 ) ， 要 么 作为 导航 元 素 〈 比 如 引导 用 户 访问 网 站 社交 媒体 页 面 的 图 标 )。 



































要 记 住 一 点 ， 用 户 并 非 都 以 相同 的 方式 浏览 网 站 。 某 些 用 户 使 用 的 设备 可 能 无 法 显示 最 新 
版 CSS， 而 另 一 些 用 户 使 用 的 是 屏幕 阅读 器 ， 它 会 用 禁 代 文 本 代替 图 像 显 示 。 

















对 于 属于 网 站 内 容 部 分 的 图 像 ， 你 通常 会 用 HTML 的 <img> 元 素 。 记 住 ， 对 于 结构 化 的 
HTML 页 面 ， 每 个 元 素 都 应 有 其 意义 。 


«img» 元 素 是 为 数 不 多 的 只 有 一 个 标记 ， 不 需 开始 / 结束 标记 对 的 元 素 。 它 也 有 很 多 属性 : 























«img src-"images/norwaypine.jpg" alt-"An evergreen tree 
with big bushy branches."-» 


总 是 要 用 到 的 两 个 属性 分 别 是 src 属性 和 alt 属性 ， 前 者 告诉 浏览 器 去 哪里 找到 图 像 文件 ， 
后 者 在 浏览 器 无 法 显示 图 像 时 提供 一 个 替代 的 文本 。 我 们 很 快 将 会 更 深入 地 学 习 替 代 文 本 。 





























6.1.3 #8 BER 
CSS 的 background-image 属性 允许 你 添加 背景 图 像 用 于 装饰 页 面 ， 它 们 不 成 为 内 容 的 
一 部 分 ” 





p { background-image: url(flowers.png); } 











不 要 使 用 background-image 属性 添加 内 容 图 像 ， 因 为 它们 对 于 使 用 屏幕 阅读 器 或 者 其 
他 文本 浏览 器 的 人 们 来 说 是 不 可 见 的 。 




















在 使 用 CSS 的 background-image 属性 为 元 素 添 加 背景 图 时 ， 图 像 将 作为 元 素 的 背景 显 
示 在 它 所 包含 内 容 (比如 段落 中 的 文本 ) 的 后 面 。 在 本 章 的 后 面部 分 我 们 会 给 出 一 个 背 
图 示例 。 


6.1.4 KIHE 
我 们 将 在 第 11 章 中 了 解 到 ， 网 页 会 为 它 所 需 的 每 个 文件 (CSS 文件 、 图 像 等 ) 都 生成 一 个 
单独 的 HTTP 请 求 ， 这 将 增加 页 面 的 加 载 时 间 。 减 少 请 求 的 数量 能 够 加 快 页 面 的 加 载 速度 。 
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我 们 可 以 通过 把 许多 小 图 像 合并 成 一 个 大 图 像 来 减少 需要 加 载 的 图 像 文件 数量 ， 然 后 通过 
CSS 定位 技术 只 将 大 图 像 中 的 特定 部 分 显示 在 页 面 的 正确 位 置 上 。 


这 种 合并 图 像 的 技术 称 为 图 像 拼 合 (image sprite). 


例如 ， 图 6-2 是 苹果 公司 用 来 显示 其 网 站 顶部 导航 栏 的 的 拼合 图 像 ， 包 括 每 个 按钮 的 各 种 
状态 (活动 、 甚 停 等 )， 都 拼合 在 一 张 图 像 中 。 




































































图 6-2: 用 于 显示 苹果 网 站 导航 栏 诸多 状态 变化 的 拼合 图 像 


实际 的 导航 效果 如 图 6-3 所 示 ， 对 于 当前 活动 页 面 (图 中 是 “iPhone” )， 其 背景 与 其 他 按 
钮 不 同 。 拼 合 图 像 中 的 每 个 矩形 切片 提供 一 种 可 能 的 按钮 背景 ， 通 过 CSS， 每 个 按钮 每 种 
状态 下 只 能 显 示 一 个 特定 的 矩形 切片 。 















































86-3: 用 拼合 图 像 创造 出 的 一 种 版 本 的 导航 栏 效果 图 


当然 ， 正 如 我 们 在 本 章 前 面 学 到 的 一 样 ， 类 似 这 样 的 按钮 通常 可 以 用 纯 CSS 来 实现 ， 根 本 
不 需要 图 像 ! 














6.1.5 ”图标 字体 
图 标 字 体 是 一 个 优秀 的 小 图 形 解决 方案 。 图 标 字 体 集 跟 其 他 字体 类 似 ， 只 不 过 字母 数字 字 
符 被 符号 图 形 所 替代 。 图 标 字体 示例 请 见 图 6-4。 


€ iR 9-9 
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6-4: tBB Yummygum 的 IconSweets 图 标 字 体 (http://iconsweets2.com/) 














图 标 字体 与 标准 字体 一 样 都 是 矢量 字体 ， 即 每 个 字符 无 论 是 以 怎样 的 大 小 显示 都 不 会 失 
真 。 这 意味 着 它们 具有 良好 的 伸缩 性 ， 即 使 是 在 大 尺寸 和 高 密度 显示 屏 上 。 

虽然 每 个 字符 只 能 是 一 种 颜色 ,而 非 多 色 ， 但 你 可 以 选择 任何 颜色 ， 就 像 为 文本 选择 颜色 
一 样 (也 可 以 像 对 文本 一 样 使 用 你 喜欢 的 其 他 CSS 来 样式 化 它们 )。 


你 会 找到 一 个 差不多 包含 了 你 所 需 的 所 有 符号 标志 的 图 标 字体 。 通 常 图 标 字体 是 基于 主题 
的 。 比 如 有 一 个 图 标 字 体 集 包含 了 世界 上 所 有 国家 的 地 形 轮廓 符号 。 你 还 可 以 找到 天 气 图 
标 、 社 交 媒 体 图 标 、 动 物 、 传 统 符号 等 任何 的 图 标 。 


使 用 @font-face 来 在 设计 中 包含 图 标 字体 ， 就 像 使 用 其 他 的 字体 一 样 (你 将 在 第 9 章 中 
学 习 如 何 给 网 站 添加 字体 )。 












































Chris Coyier 发 表 在 CSS-Tricks 上 的 文章 “Using Fonts for Icons” (http://css-tricks.com/ 
using-fonts-for-icons/) 说 明了 使 用 图 标 字 体 的 好 处 。 同 时 也 请 你 务必 读 下 Drew Wilson F 
XK-F Pictos 上 的 “Using Icon Fonts” (http://pictos.cc/articles/using-icon-fonts/) 一 文 以 弄 清 
如 何 确保 图 标 字体 是 可 访问 的 。 


你 可 以 在 网 上 搜寻 图 标 字体 (很 多 是 免费 的 )， 其 至 还 有 网 站 允许 你 创建 自己 的 图 标 字体 。 
尽管 图 标 字 体 文件 通常 都 不 大 ， 但 应 合理 使 用 它们 ， 避 免 滥 用 。 


6.2 SIG 


你 要 考虑 到 不 是 每 个 访问 你 网 站 的 用 户 都 能 够 看 见 网 站 。 












































大 多 数 情况 下 这 指 的 是 言 人 和 使 用 屏幕 阅读 器 的 用 户 。 他 们 看 不 到 图 像 ， 所 以 屏幕 阅读 器 
会 读 出 替代 文本 (alt text). 来 为 用 户 描述 图 像 的 内 容 。 你 需要 设置 合适 的 替代 文本 以 便 这 
些 用 户 不 会 错失 内 容 中 的 重要 部 分 。 


而 且 也 不 是 只 有 盲人 用 户 是 你 的 替代 文本 的 潜在 受众 。 有 时 图 像 由 于 网 络 连接 或 文件 问题 
而 无 法 加 载 ， 在 这 种 情况 下 ， 用 户 将 在 屏幕 上 本 应 是 图 像 出 现 的 地 方 看 到 你 的 赫 代 文本 。 


在 图 6-5 中 , 你 看 到 的 是 所 有 图 像 都 正常 显示 的 美国 铁路 公司 网 站 ， 而 在 图 6-6 中 所 有 的 
图 像 都 被 替代 文本 所 取代 。 
























































j: 











AMTRAK 


[English 了 


| ( >} Ask me a question © 


Dealsv Plan 


Join Guest Rewards v 





bLogin Register 


aaam 


Buy Tickets 


Passengers with a Disability 
© One-way 


From 


Round-Trip — Multi-City > 
Accessible Space 


Find a Station 
r Fix o Steton Multi-City Tickets 


TO OUR CUSTOMERS 
Recent Amtrak.com 
system outage 
information 


Travel your way. 


INTRODUONG NEW AMTRAK FARE OPTIONS » 


Change for Low Vision 





Group Travel 
Hotel, Insurance & More 


Search Amtrak.com 


Contact Us IT'S TIME TO REWARD Yi 





Redeem for Free Travel 


Departs 
[Fri, Mar 14, 2014] EL 


Time 
Anytime E: 
Adults 


(em (m 
1: [e 


Promotion Code 


Infants 
(under 2) 


o 
FINDTRAINS 上 


Chüdren 
2-15 


|o -] 


Sleeping Car 


Shop the 


JOIN TODAY» 


GLACIER NATIONALPARK 


DISCOVERY 


SAVE $300 PER COUPLE » 


Amtrak for 





Virtual Tours Amtrak S! 


tore Mobile 





图 6-5: 美国 铁路 公司 网 站 ， 所 有 图 像 正 
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空 值 作为 alt 属性 的 值 : 
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«img src-"images/decorative.jpg" alt=""> 
不 要 轻易 省 略 alt ETE, WAXER D, DESEDUIESCRECUS IAS RATAREA A, 
并 且 因 为 没有 替代 文本 ， 作 为 第 二 选择 ， 阅 读 器 将 朗读 文件 名 给 用 户 。 
使 用 空 值 将 告诉 屏幕 阅读 器 完全 跳 过 图 像 。 


美国 铁路 公司 网 站 上 的 一 个 问题 是 ， 右 列 中 的 促销 图 像 没 有 指定 灰 代 文本 ， 甚 至 连 空 值 都 
未 设置 ， 所 以 它们 显示 为 “null 。 


编写 好 的 替代 文本 

仅仅 是 为 图 像 添加 了 替代 文本 还 不 够 ， 需 要 让 文本 真正 告诉 用 户 在 内 容 场景 中 图 像 包 含 了 
什么 。 替 代 文 本 是 对 图 像 所 提供 信息 的 替换 品 ， 而 不 仅仅 是 图 像 的 描述 ， 我 将 解释 这 其 中 
的 差别 。 























要 弄 清 楚 对 于 一 个 特定 的 图 像 其 替代 文本 应 该 是 什么 ， 想 象 你 正在 为 他 人 大 声 读 网 页 。 当 
你 遇 到 图 像 时 ， 你 会 怎么 说 ? 

















当然 ， 图 像 标题 也 提供 了 图 像 的 信息 ， 所 以 请 记 住 你 不 需要 再 重复 这 一 信息 。 
fian, AERE 6-7 中 的 图 像 。 假 设 图 像 的 标题 是 “ 沿 着 佛罗里达 101 号 公路 ”。 
































图 6-7. 根据 围绕 内 容 的 不 同 ， 一 张 图 像 可 以 有 很 多 种 解释 
要 编写 出 好 的 禁 代 文本 ， 你 首先 需要 从 内 容 所 在 的 场景 考虑 。 


例如 ， 可 能 这 幅 图 像 是 一 条 关于 飓风 的 新 闻 报 道 的 配 图 。 表 达 的 是 飓风 对 棕榈 树 的 影响 。 
你 的 替代 文本 可 以 是 “暴风 雨中 标 榈 树 的 树枝 全 被 刮 向 一 个 方向 ”。 


或 者 图 像 是 上 昨日 一 场 经 过 佛罗里达 的 飓风 的 新 闻 报 道 的 配 图 ， 传 达 的 信息 是 描述 申 风 经 过 
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时 公路 上 的 情况 。 你 的 替代 文本 可 能 就 变 成 了 “ 空 沪 潮湿 的 公路 旁 棕榈 树 倾斜 在 风 中 o 


同一 幅 图 像 伴随 不 同 的 内 容 有 不 同 的 含义 ， 你 不 可 能 描述 出 图 像 的 每 一 处 细微 差别 ， 所 以 
你 需要 决定 什么 样 的 百代 文本 是 与 上 下 文 最 相关 的 。 


尽管 可 能 只 有 少数 用 户 会 看 禁 代 文本 ,但 它 对 这 些 用 户 是 非常 必要 的 ， 你 应 该 为 此 花心 
思 ， 而 不 只 是 随便 给 图 像 设置 个 如 “树木 ”这 样 简单 的 替代 文本 。 虽 然 这 也 对 图 像 做 出 了 
苗 述 ， 但 它 没有 为 用 户 提供 任何 有 用 的 信息 。 


加 入 尽 可 能 多 的 细节 描述 对 于 充分 传达 图 像 的 含义 是 必要 的 。 但 是 ， 也 应 控制 奉 代 文本 的 
长 度 。 通 常 保持 在 256 个 字符 以 内 (包括 空格 ) 比较 合适 ， 当 然 了 ， 实 际 上 对 于 替代 文本 
并 没有 字数 上 的 限制 。 


你 并 不 总 是 需要 对 图 像 的 视觉 外 观 进行 描述 。 例 如 ， 一 个 公司 的 标志 通常 可 以 用 公司 名 及 
公司 标志 上 的 附加 文字 所 代替 。 你 不 需要 描述 样式 化 后 文本 的 颜色 和 外 观 。 


在 其 他 情况 下 ， 图 像 可 能 会 显示 元 余 信 息 。 假 设 你 有 一 个 页 面 列 出 一 项 活动 的 赞助 商 ， 每 
一 个 列表 项 中 公司 名 (文字) 旁边 都 有 公司 的 标志 图 像 。 如 有 果 你 设置 标志 图 像 的 替代 文本 
为 公司 名 ， 那 意味 着 在 屏幕 阅读 器 中 列表 项 将 被 读 作 “公司 名 ， 公 司 名 ”， 在 这 种 情况 下 
不 为 标志 设置 替代 文本 更 好 ， 这 样 就 只 会 读 一 次 “公司 名 。 


如 有 果 你 不 确定 所 编写 替代 文本 是 否 合适 ， 只 要 想象 一 下 页 面 中 没有 图 像 ， 看 看 你 的 替代 文 
本 是 否 对 页 面 有 帮助 意义 。 浏 览 器 或 浏览 器 插件 通常 有 这 样 一 个 选项 ， 可 以 用 赫 代 文本 代 
禁 页 面 上 的 图 像 ， 那 样 你 可 以 清楚 地 看 到 效果 怎样 。 


不 要 用 “XX 的 图 像 ”或 “XX 的 照片 ”这 样 的 文本 打头 来 设置 奉 代 文本 ， 屏 幕 阅读 器 在 读 
替代 文本 之 前 ， 会 告 之 读 的 是 图 像 。 


使 用 title 属性 提供 有 关 图 像 的 附加 信息 是 一 个 相当 普遍 的 做 法 ， 当 用 户 移动 鼠标 光标 到 
图 像 上 时 会 “弹出 ”一 个 信息 框 显 示 附 加 信息 。 但 这 却 不 是 一 个 好 的 做 法 ， 因 为 其 意味 着 
信息 并 非 对 所 有 用 户 都 是 可 用 的 (移动 设备 用 户 、 只 有 键盘 的 用 户 、 大 多 数 屏幕 阅读 器 用 
户 )。 如 果 你 有 信息 要 提供 给 用 户 ， 应 包含 在 图 像 标 题 中 ， 它 是 对 所 有 用 户 都 可 见 的 。 


不 要 只 图 简单 ， 而 直接 复制 禁 代 文本 到 title 属性 中 ， 因 为 有 些 屏 幕 阅读 器 两 者 都 会 读 。 
更 多 的 信息 ， 请 查看 Steve Faulkner 在 The Paciello Group 网 站 上 撰写 的 “Using the HTML title 
attribute" (http;//blog.paciellogroup.com/2013/01/using-the-html-title-attribute-updated/) 一 文 。 


6.3 图像 文件 格式 


一 般 来 说 ， 你 用 在 网 站 上 的 图 像 应 该 是 JPEG、GIF、PNG 格式 的 。 所 有 浏览 器 都 可 以 显示 
这 些 文件 格式 。 我 们 也 会 讲 一 下 SVG 文件 格式 ， 它 比 其 他 类 型 的 文件 更 具有 灵活 性 ， 但 目 




















































































































































































































前 并 不 是 所 有 的 浏览 器 都 支持 SVG 格式 的 图 像 文件 。 通 过 文件 扩展 名 我 们 可 以 知晓 
文件 的 格式 类 型 。 





加 





像 











文件 格式 之 间 的 差异 对 于 响应 式 设 计 有 重要 的 影响 ， 因 为 你 选择 的 格式 会 影响 到 图 像 的 文 
件 大 小 。 你 应 该 使 用 既 能 够 产生 最 小 字 市 数 ， 同 时 图 像 的 效果 仍 符合 你 预期 的 文件 格式 .。 


还 有 一 些 其 他 的 图 像 文件 类 型 ， 但 它们 无 法 工作 于 所 有 的 浏览 器 ， 所 以 应 该 避免 使 用 它 
们 。 如 果 一 个 你 要 用 在 页 面 上 的 图 像 的 格式 与 常用 格式 不 同 ， 使 用 图 像 编辑 软件 将 它 转换 
成 JPEG、GIF x PNG 格式 的 文件 。 






































6.3.1 JPEG 
文件 扩展 名 : .jpg 或 jpeg ( 读 作 “jay-peg”)。 


这 是 传统 意义 上 最 常见 的 一 种 用 在 网 页 中 的 图 像 格式 。 适 合 于 照片 及 其 他 包含 很 多 种 颜色 
的 图 像 。 


6.3.2 GIF 
文件 扩展 名 : .gif GRE “gif w Sif). 





这 种 类 型 的 图 像 通 过 减少 文件 中 使 用 的 颜色 数量 来 压缩 文件 大 小 (产生 较 小 的 文件 )。 一 
个 GIF 图 像 最 多 可 显示 256 种 的 颜色 ， 这 意味 着 它 一 般 不 能 用 于 可 能 有 成 千 上 万 种 颜色 的 
照片 。 图 6-8 显示 了 一 张 照片 保存 为 GIF 格式 后 的 效果 。 它 看 上 去 是 失真 的 ， 因 为 没有 足 
够 的 颜色 来 融合 所 有 的 像素 。 











图 6-8: 因为 颜色 数 不 够 ， 这 张 GIF 图 像 看 上 去 是 失真 的 ( 另 见 彩 插图 6-8) 
因此 ，GIF 格式 最 好 用 于 颜色 范围 较 小 的 图 像 ， 比 如 标志 或 插图 ， 而 不 是 照片 。 
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不 同 于 JPEG 图 像 ， 











GIF 图 像 中 可 以 有 透明 的 区 域 ， 这 类 GIF 图 像 显 示 在 页 面 上 时 ， 背 景 














像 的 透明 区 域 显 示 出 来 。 








此 外 ，GIF 图 像 能 够 保存 多 个 不 同 的 帧 〈 按 顺序 逐一 显示 )， 可 用 于 显示 非常 短 的 动画 剪 
辑 。 虽 然 这 可 能 偶尔 会 用 上 ， 但 文件 大 小 却 会 大 大 增加 。 你 可 以 使 用 CSS 来 重 现 此 动画 效 
果 ， 其 对 网 站 性 能 


另外 要 考虑 到 的 是 很 多 人 觉得 网 页 上 的 动态 物件 会 分 散 往 意 力 ， 所 以 最 好 避免 使 用 动画 图 像 。 


6.3.3 PNG 


文人 





有 两 种 类 型 的 PNG 


类 型 的 PNG 格式 来 


两 种 类 型 的 
TV TEUER E Uc TR 

















8 位 PNG 文件 只 


9 影响 要 少 得 多 。 





扩展 名 : png ( 读 作 “ping”)。 











图 像 ， 当 在 图 像 编 辑 软件 中 以 PNG 格式 保存 文件 时 ， 会 被 问 到 以 哪 种 














呆 存 图 像 : 





支持 256 种 上 颜色， 类似 GIF 文件 ， 但 因为 压缩 算法 的 差异 ， 同 样 的 图 


像 PNG 格式 的 文件 可 能 要 小 于 GIF 格式 的 文件 ; 
24 位 PNG 文件 支持 约 1600 万 种 颜色 ， 类 似 JPG 文件 ， 但 因为 压缩 算法 的 差异 ， 同 样 
的 图 像 PNG 格式 的 文件 通常 要 大 于 JPG 格式 的 文件 。 

















PNG 文件 都 像 GIF 文件 一 样 支持 透明 。 不 过 ，24 位 PNG 文件 还 支持 半 透 明 ， 

















i 的 整个 背景 (网 页 )， 而 并 不 只 是 图 像 空白 区 域 后 的 那 一 部 分 (IE6 及 











6.3.4 SVG 


xfi 








其 更 早 版 本 不 支持 此 效果 )。 我 们 也 可 以 使 用 CSS 的 opacity 属性 来 实现 类 似 的 效果 。 


FJ HA: .svg ( 读 作 “ess-vee-gee”)。 














SVG 是 一 种 矢量 图 形 格 式 。 相 比 其 他 格式 保存 的 是 图 像 所 有 像素 点 的 数据 ，SVG 则 是 以 


XML 格式 保存 








图 像 信息 ， 其 中 定义 了 图 像 各 部 分 AR. JER HE, WME ERT) 








及 各 部 分 之 间 的 关系 。 这 种 类 型 的 图 像 文 件 只 适用 于 图 形 ， 不 适用 于 照片 。 


由 于 SVG 是 
尺寸 都 不 会 降低 


























以 这 种 方式 而 非 逐 像素 存储 数据 ， 所 以 它 与 分 辩 率 无 关 。 你 调整 图 像 至 任意 
图 像 质量 ， 所 以 不 需要 针对 不 同 的 分 辨 率 创 建 单独 的 图 像 。 



































唯一 的 缺点 是 IE8 (及 其 更 早 版 本 ) 和 Android 2.3 (及 其 更 早 版 本 ) 均 不 支持 SVG 图 像 ， 
因此 在 这 些 浏 览 姻 中， 你 需要 使 用 JavaScript 以 其 他 格式 来 代替 此 格式 的 图 像 。 你 可 以 用 
诸如 SVG Swap (https://github.com/teleject/svg-swap) 之 类 的 插件 实现 此 功能 。 




















想 要 更 多 地 了 解 使 用 SVG 图 像 的 相关 信息 ， 可 以 去 读 下 Chris Coyie 发 表 在 CSS-Tricks 上 
的 文章 “Using SVG" (http://css-tricks.com/using-svg/) 。 











6.4 REER 


在 网 站 中 ， 影 响 用 户 体验 的 一 个 最 完成 页 面 加 载 和 浑 染 需要 花费 多 长 
时 间 。 如 果 时 间 过 长 ， 用 户 会 放弃 并 离开 。 更 糟糕 的 是 ， 在 一 个 慢 速 连接 上 无 论 用 户 等 多 
入， 页 面 都 没 法 完成 加 载 。 


性 能 瓶颈 最 常见 的 原因 之 一 就 是 图 像 。 


6.41 像素 与 分 辨 率 

在 讨论 优化 图 像 之 前 ， 我 们 需要 讲 一 下 像素 。 你 可 能 知道 像素 是 什么 。 在 电脑 屏幕 上 ， 像 
素 是 一 个 彩色 (或 灰 度 ) 的 物理 点 (屏幕 可 以 显示 的 最 小 的 点 )。 你 在 屏幕 上 看 到 的 图 像 
实际 上 是 由 一 个 个 点 组 成 的 ， 与 你 在 电视 上 或 打印 在 纸 上 看 到 的 图 像 是 一 样 的 。 有 那么 多 
的 点 以 至 于 我 们 通常 无 法 分 辨 出 每 个 单独 的 点 ， 但 放大 之 后 ， 它 们 看 起 来 如 图 6-9 所 示 。 
















































































图 6-9: 屏幕 上 一 幅 图 像 中 的 单个 像素 放大 后 的 样子 〈 另 见 彩 插图 6-9) 


像素 的 数量 决定 了 电脑 屏幕 的 分 辨 率 。 例 如 ，1024 x 768 分 辩 率 的 显示 器 屏幕 是 1024 像 
素 宽 乘 以 768 像素 高 ， 这 通常 被 认为 是 一 台 15 英寸 显示 器 (12 英寸 宽 乘 以 9 英寸 高 ， 即 
15 英寸 对 角 线 长 度 )。 


直到 最 近 为 止 ， 像 素 的 大 小 还 总 是 相同 的 。 你 从 屏幕 分 辩 率 就 可 看 出 屏幕 有 多 大 。1280 x 
1024 分 辨 率 的 屏幕 在 物理 上 肯定 大 于 1024 x 768 分 辩 率 的 屏幕 。 


这 就 是 我 们 设计 的 内 容 以 像素 为 单位 的 原因 ， 因 为 它们 在 所 有 的 屏幕 上 总 是 相同 的 大 小 。 
一 个 300 像素 x 300 像素 的 图 像 在 屏幕 上 总 是 以 相同 的 大 小 显现 ， 不 管 是 用 什么 显示 器 查 
看 它 。 

但 近年 来 一 些 设 备 制造 商 意 识 到 ， 如 果 他 们 将 像素 变 得 更 小 ， 就 能 在 屏幕 上 塞 人 更 多 的 像 
素 ， 就 会 使 屏幕 上 的 内 容 看 起 来 更 “真实 。 
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例如 ， 以 物理 尺寸 来 说 ，iPhone 的 屏幕 似乎 应 该 是 320 像素 x 480 像素 ， 但 它 的 实际 分 辩 
率 是 640 像素 x 960 像素 ， 在 每 个 方向 上 都 多 出 了 两 倍 的 像素 。 








这 对 于 我 们 刚才 提 到 的 300 像素 的 图 像 意味 着 什么 ” 当 iPhone 屏幕 在 以 实际 分 辩 率 显示 网 
页 时 ,会 表现 得 好 像 屏 幕 是 320 像素 x 480 像素 一 样 。 要 不 然 ， 图 像 上 的 一 切 都 将 显得 实 
在 是 太 小 了 。 因 此 ，300 像素 的 图 像 在 每 个 方向 都 将 是 用 两 倍 之 多 的 像素 显示 : 不 是 300 
像素 x 300 像素 ， 而 是 用 600 像素 x 600 像素 。 


所 以 现在 我 们 需要 区 分 iPhone 在 显示 网 页 时 它 自称 所 拥有 的 像素 (320 像素 x 480 像素 ) 
和 实际 构成 屏幕 的 物理 像素 (640 像素 x 960 像素 ) 之 间 的 差别 。 我 们 在 设计 中 参考 的 是 
它 自称 所 拥有 的 像素 ， 称 为 参照 像素 或 CSS 像素， 而 屏幕 上 的 物理 像素 称 为 设备 像素 或 硬 
件 像 素 。 





























6.42 ”高 密度 屏幕 

这 些 新 的 如 iPhone 这 样 的 设备 像素 多 于 参照 像素 的 屏幕 称 为 高 密度 屏幕 (high-density 
screen) 。 根 据 定 义 ， 这 些 屏 幕 的 像素 比率 (pixel ratio) 大 于 2。 多 出 的 像素 使 得 屏幕 的 显 
示 效 果 要 优 于 普通 屏幕 ， 因 为 具有 的 像素 足够 多 ， 人 有 眼 不 能 够 分 辨 出 单个 像素 ,而 且 它 看 
起 来 更 加 的 “真实 ”。 


























苹果 公司 称 这 种 屏幕 为 视网膜 异 ， 你 可 以 在 新 的 iPhone、iPad 和 MacBook Pro 上 见 到 它 
们 。 举 例 来 说 ，iPhone 3 的 分 辨 率 是 320 x 480, iPhone 4 拥有 相同 的 物理 尺寸 ， 但 分 辩 率 
却 是 640 x 960， 在 每 个 方向 上 的 像素 数 都 是 原先 的 两 倍 (合计 则 是 4 倍 之 多 ) 。 


设备 像素 和 参照 像素 之 间 的 差异 可 能 会 非常 混乱 ， 这 也 是 我 们 在 网 页 设计 中 转向 使 用 如 
em 和 百分比 之 样 的 相对 单位 的 一 个 原因 ， 那 样 我 们 就 不 必 管 屏幕 是 如 何 定义 像素 的 (这 
可 能 在 将 来 的 设备 中 会 发 生变 化 )， 而 使 用 相对 度量 单位 ， 将 使 设计 在 每 个 屏幕 上 都 有 相 
同 的 显示 效果 。 























不 同 设备 以 不 同 的 方式 呈现 像素 ， 而 且 这 一 切 都 还 在 逐步 变化 中 。 


如 果 你 想 了 解 更 多 这 方面 的 信息 。 人 参阅 Scott Kellum 发 表 于 4 List Apart 上 的 文章 “A Pixel 
Identity Crisis" (http://alistapart.com/article/a-pixel-identity-crisis ) 。 














高 密度 屏幕 的 问题 在 于 ， 如 果 发 送 普 通 图 像 给 这 些 屏幕 ， 屏 幕 将 以 预期 的 尺寸 显示 图 像 ， 
但 因为 它们 填充 空间 所 用 的 物理 像素 数 是 普通 屏幕 的 4 倍 之 多 ， 这 通常 会 导致 图 像 显示 失 
真 或 模糊 。 











最 佳 的 解决 方案 是 提供 一 个 两 倍 尺 寸 的 图 像 。 例 如 ， 用 400 x 400 的 图 像 替 代 200 x 200 
的 图 像 ， 但 显示 在 相同 的 200 x 200 (参照 像素 ) 空间 中 。 在 高 密度 屏幕 上 ， 图 像 看 上 去 
是 相同 的 尺寸 ， 但 会 显得 非常 清晰 。 





























但 既然 我 们 想 为 高 密度 屏幕 提供 不 同 的 图 像 ， 那 我 们 将 会 有 文件 体积 更 大 ， 需 要 的 加 载 时 
间 更 长 的 图 像 。 你 不 会 希望 普通 屏幕 用 户 浪费 带宽 去 下 载 这 些 大 图 像 。 我 们 将 在 后 面谈 及 
响应 式 图 像 一 一 如 何 基于 屏幕 是 否 为 高 密度 屏 来 使 用 不 同 的 图 像 时 解决 这 个 问题 。 


如 果 你 使 用 的 是 两 个 一 组 的 对 应 图 像 ， 一 般 约定 用 于 高 密度 屏幕 的 图 像 其 文件 名 末尾 加 上 
“@2X”。 例 如 ， 你 的 文件 可 能 会 被 命名 为 tree.jpg 及 tree@2x.jpg。 


用 于 高 密度 屏幕 的 图 像 并 不 一 定 总 是 原 图 像 的 2 倍 大 小 ， 因 为 高 密度 屏幕 可 以 有 各 种 像素 
密度 。 有 时 为 不 同 分 辩 率 的 屏幕 同时 创建 1.5 倍 和 2 倍 的 图 像 是 可 取 的 ， 尽 管 这 可 能 并 不 
一 定 必 要 ， 而 且 有 可 能 只 会 使 问题 变 得 更 加 复杂 。 


我 们 可 以 使 用 包括 JavaScript 或 CSS 在 内 的 各 种 解决 方案 来 切换 图 像 ， 使 高 密度 的 屏幕 获 
得 高 密度 的 图 像 。 要 了 解 更 多 信息 ， 请 阅读 Edward Cant 发 表 在 Menacing Cloud 上 的 博客 
XÆ “Optimising for High Pixel Density Displays" (http://menacingcloud.com/?c=highPixelDe 































































































nsityDisplays) 。 





如 果 没 有 能 力 或 资源 来 为 网 站 添加 单独 的 高 密度 图 像 ， 我 们 有 两 个 选择 。 


首先 ， 你 可 以 对 所 有 屏幕 都 使 用 高 密度 版 本 的 图 像 ， 只 要 确保 图 像 尺 寸 正 确 。 这 样 做 的 缺 
点 是 图 像 会 很 大 ， 需 要 更 长 的 时 间 来 加 载 。 如 果 你 的 网 站 中 图 像 不 是 很 多 ， 这 是 一 个 可 以 
接受 的 解决 方案 。 


第 二 个 选择 是 坚持 使 用 常规 密度 版 本 的 图 像 。 它 们 仍 将 显示 在 高 密度 屏幕 上 ， 只 是 可 能 会 
略 有 模糊 。 查 看 网 站 在 高 密度 屏幕 上 的 显示 效果 ， 以 决定 你 是 否 可 以 接受 。 


当然 ， 你 可 以 混合 使 用 这 两 种 方案 ， 一 种 作为 通用 方案 应 用 于 网 站 中 的 大 多 数 图 像 ， 另 一 
种 则 只 应 用 于 网 站 中 的 特定 图 像 ， 不 必 对 所 有 的 图 像 都 采用 一 种 处 理 方案 
































6.4.3 ”压缩 图 像 
对 图 像 进行 压缩 能 够 减 小 文件 大 小 ， 并 有 助 于 更 快 地 加 载 图 像 。 


在 图 像 编辑 软件 中 ， 你 可 以 找到 用 高 、 中 、 低 品质 保存 图 像 的 选项 《查找 像 “存储 为 Web 
所 用 格式 ”或 “导出 ”这 样 的 选项 )。 尝 试 以 不 同 级 别 的 压缩 品质 来 保存 图 像 ， 看 看 文件 
大 小 的 变化 情况 。 有 些 图 像 在 较 低 的 质量 下 会 显得 模糊 或 失真 ， 而 无 法 用 在 网 站 上 。 但 有 
些 图 像 设置 成 较 低 质量 仍 有 较 好 的 显示 效果 ， 从 而 使 得 你 可 以 使 用 更 小 的 文件 。 


改变 图 像 文件 格式 也 可 以 减 小 文件 大 小 。 试 试 分 别 以 JPEG、GIF 或 PNG 格式 保存 图 像 ， 
看 看 文件 大 小 是 否 有 差别 。 再 次 重申 ， 务 必 保 证 你 的 选择 不 会 明显 降低 图 像 质量 。 


Photoshop 等 应 用 程序 提供 有 选项 可 以 在 保存 之 前 在 屏幕 上 并 排查 看 图 像 的 不 同 版 本 ， 并 
可 比较 文件 的 大 小 和 类 型 。 
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在 显示 效果 仍然 不 错 的 前 提 下 ， 尽 量 使 用 那个 占用 空间 最 小 的 图 像 版 本 。 请 务必 在 不 同 的 
设备 屏幕 上 对 其 进行 测试 ， 因 为 在 不 同 的 屏幕 上 可 能 会 有 不 同 的 显示 效果 。 











也 可 以 试 试 来 自 雅 虎 开 发 者 网 络 的 Smush.it 在 线 工 具 (http://www.smushit.com/ysmush.it/)， 
它 可 以 在 不 改变 显示 质量 的 情况 下 优化 图 像 。 








nS 


要 了 解 更 多 有 关 如 何 为 网 络 优化 图 像 的 知识 ， 了 阅读 Christopher Schmitt 的 《响应 式 Web 
形 设计 》 (Designing Web & Mobile Graphics: Fundamental Concepts for Web and Interactive 
Projects, H New Riders 出 版 ) 。 











[小 贴 士 ] 

即使 你 对 图 像 进行 压缩 优化 以 用 于 网 站 ， 你 仍 需 保留 原始 的 高 分 状 率 图 像 ， 以 便 不 时 之 需 。 
追踪 原始 文件 的 窍门 是 将 它们 与 优化 后 的 图 像 上 传 到 网 站 的 同一 个 目录 中 。 即 便 高 分 辩 率 图 
像 并 不 会 在 网 站 中 实际 使 用 ， 但 如 果 有 人 在 将 来 需要 用 到 它们 ， 他 们 会 知道 可 以 在 哪里 找到 
这 些 原始 文件 。 


现 如 今 存 储 的 价格 已 很 便宜 ， 所 以 保存 它们 的 成 本 极 小 。 给 予 原始 文件 的 文件 名 要 能 清楚 表 
明 其 是 原始 文件 ， 比 如 flowers original.psd， 那 样 你 就 很 好 分 辨 它们 了 。 


6.4.4 实际 尺寸 
如 果 未 使 用 HTML 或 CSS 告诉 浏览 器 图 像 的 尺寸 ， 浏 览 器 默认 会 以 全 尺寸 来 显示 图 像 。 所 
谓 全 尺寸 也 就 是 你 在 图 像 编 辑 软 件 中 保存 图 像 时 的 图 像 尺 寸 ， 比 如 说 300 像素 x 400 像素 。 


有 时 以 全 尺寸 显示 图 像 没什么 问题 ， 但 有 时 基于 视 口 宽度 ， 你 可 能 希望 图 像 比 实际 尺寸 小 
一 些 。 我 们 可 以 用 CSS 来 使 图 像 变 小 。 


















































不 过 ， 你 不 会 希望 图 像 大 于 其 实际 尺寸 显示 ， 因 为 这 最 终 会 使 图 像 变 得 模糊 不 请。 幸运 的 
是 ， 浏 览 器 决 不 会 这 么 做 ， 除 非 是 故意 用 CSS 这 么 做 。 图 6-10 和 图 6-11 比较 了 实际 尺寸 
图 像 和 以 大 于 其 实际 尺寸 显示 的 图 像 之 间 的 差异 。 





























对 于 响应 式 设 计 ， 图 像 尺 寸 可 能 会 因 屏幕 宽 度 的 不 同 而 要 进行 调整 ， 因 此 为 能 适应 所 有 可 
能 的 屏幕 宽度 及 保证 图 像 的 显示 质量 ， 一 开始 应 选用 最 大 尺寸 (在 所 有 视 口 宽度 下 ) 的 图 
像 文 件 。 


但 是 对 于 一 个 特定 的 屏幕 尺寸 ， 你 当然 不 会 希望 网 站 去 下 载 比 实际 所 需 尺 寸 大 得 多 的 图 像 
文件 。 我 们 将 在 本 章 稍 后 部 分 对 这 个 问题 进行 处 理 。 











& 6-11: 


大 于 实际 尺寸 显示 的 图 像 ( 








另 见 彩 插图 6-11) 
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65 内容 图 像 


当 添 加 内 容 图 像 到 网 站 中 时 ， 我 们 要 使 用 «ima» 元 素 。 在 接 下 来 的 儿 市 中 ， 我 们 将 介绍 如 
何 将 内 容 图 像 添加 到 网 页 中 ， 放 置 在 正确 的 位 置 上 ， 并 确保 它们 是 正确 的 尺寸 。 




















6.5.1 <img> 元 素 


«img» 是 一 个 行内 元 素 。 在 下 面 的 代码 中 ，<img> 元 素 在 «h2» 和 «p» 两 个 块 级 元 素 之 
间 ， 因 此 图 像 也 堆 倒 在 这 两 个 元 素 之 间 ， 如 图 6-12 所 示 : 




















<h2>Pandas in Wolong</h2> 
«img src-"images/pandaphoto.jpg" alt-"A panda eating bamboo."> 


<p>The Wolong National Nature Reserve, in the Sichuan 
Province of China ... 
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Wolong since it was established in 1980. Pandas are an endangered species, with between 1500 and 
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The Wolong Nature Reserve covers around 200,000 hectares (772 square miles) in the Ming Shan 
mountain rangc, in thc ABA Tibctan Autonomous Rcgion, ncar thc Tibctan Platcau. Elcvations in 
the reserve range from 1555 to 4600 meters (4,000 to 11,000 ft). 

The Wolong Panda Center was devestated during the May 2008 earthquake, and the main road to 
the center was impassable after the carthquakc. Five staff members and onc captive panda died in 
the carthquake. The pandas at the center were tc arily relocated to another a center in 
China, until a rebuilt Wolong Panda Center opened in 2012, in another area of the reserve. The new 
center integrates scientific research, scientific research with captive breeding and also creates 
opportunitics for introducing pandas into thc wild. 
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6-12: 网 站 的 主 内 容 块 中 加 入 一 张 熊猫 图 像 
与 迄今 为 止 我 们 所 见 过 的 其 他 元 素 略 有 不 同 ，<img> 元 素 不 像 标 题 和 有 段落 元 素 那 样 在 其 包 


























126 | 第 6 章 


含 的 内 容 之 间 有 开始 / 结束 标记 ， 相 反 ， 它 只 有 一 个 标记 ， 并 使 用 src 和 alc 属性 来 决定 
显示 在 页 面 上 的 图 像 。 这 两 个 属性 都 是 必需 的 。 


src 属性 包含 图 像 文 件 的 链接 网 址 ， 如 果 图 像 文件 与 网 页 在 同一 网 站 时 ， 可 以 是 相对 链接 
(images/pandaphoto.jpg) ; 如 果 是 其 他 网 站 上 图 像 ， 则 应 是 绝对 链接 (http//www.example. 
com/pandaphoto.jpg.) 。 



































alt 属性 我 们 已 经 讨论 过 ， 它 告诉 浏览 器 在 图 像 不 可 用 时 显示 什么 内 容 。 


6.5.2 ”加 入 图 像 


现在 让 我 们 看 下 页 面 布局 在 最 大 视 口 宽度 下 的 显示 效果 。 是 不 是 觉得 需要 对 照片 旁边 的 那 
一 大 块 空白 区 域 做 些 什么 ? 


你 也 许 在 很 多 网 站 、 杂 志和 报纸 上 见 过 它们 通常 使 文字 环绕 在 图 像 周 围 以 填充 那些 空白 
域 。 这 将 用 到 float 属性 ， 我 们 在 第 4 章 中 已 讨论 过 它 。 


我 们 将 给 予 图 像 float: left 样式 ， 那 样 元 素 将 始终 放置 在 左边 ， 后 面 的 内 容 将 围绕 它 
“浮动 ”以 填充 其 四 周 可 用 的 空白 区 域 ， 如 图 6-13 所 示 : 
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article img { float: left; } 
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图 6-13: 照片 在 主 内容 区 中 浮动 至 左边 
也 可 以 浮动 图 像 至 右边 ， 如 图 6-14 所 示 : 
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article img ( float: right; } 
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The Wolong National Nature Preserve, in the Sichuan Province of China, is home to more than 150 
giant pandas. It's one of the key sites for panda breeding research, and 66 cubs have been born at 
Wolong since it was established in 1980. Pandas are ae crar species, with between 1500 and 
3000 living in the wild, and less than 300 in captivity {1 centers and zoos). 

The Wolong Nature Reserve covers around E r; ( 
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road to the center was impassable after the 
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Panda Center opened in 2012, in another area 
of the reserve. new center integrales 
scientific research, scientific research with 
captive breeding and also creates w oppok 
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图 6-14: 照片 在 主 内 容 区 中 浮动 至 右边 
然后 可 能 还 需要 加 上 点 内 边 距 ， 这 样 看 起 来 效果 会 更 好 ， 如 图 6-15 所 示 : 








article img { float: right; padding-left: 3$; paddingbottom: 
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图 6-15: 给 浮动 图 像 四 周 添加 内 边 距 


10px; 


) 
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6.5.3 灵活 的 图 像 尺 寸 
以 上 图 像 是 以 全 尺寸 显示 的 ， 因 为 我 们 没有 使 用 CSS 来 改变 其 尺寸 。 在 最 大 页 面 宽度 上 ， 
这 看 起 来 很 好 一 一 图 像 足够 大 ， 可 以 看 到 很 多 细节 ， 也 有 足够 的 空间 容 下 围绕 它 的 文本 。 


但 是 如 果 把 浏览 器 窗口 变 罕 ， 则 会 觉得 图 像 周围 的 文本 有 些 拥挤 ， 如 图 6-16 所 示 。 



































86-16. 在 较 宽 的 页 面 中 图 像 有 足够 的 空间 ， 但 当 屏幕 变 窄 时 , 它 将 变 得 拥挤 


当 视 口 变 小 时 ， 图 像 跟 着 变 小 是 明智 的 ， 因 此 不 需要 占用 那么 大 的 屏幕 区 域 。 我 们 可 以 将 
图 像 宽度 设置 成 50% 来 做 到 这 一 点 ， 这 意味 着 图 像 的 宽度 是 其 包含 元 素 宽度 的 一 半 。 











article img { width: 50$; } 


如 图 6-17 所 示 ， 你 可 以 看 到 图 像 在 各 种 宽度 的 屏幕 上 其 尺寸 都 是 合适 的 ， 直 到 宽度 罕 至 
36 em 时 布局 将 切换 成 单列 布局 (我 们 很 快 会 看 到 )。 



























































86-17. 在 屏幕 宽度 变 罕 时 ， 图 像 也 随 之 变 小 


因此 设置 了 CSS 之后， 在 较 大 的 屏幕 上 ， 你 可 以 利用 充裕 的 空间 以 较 大 的 尺寸 来 显示 图 
像 。 而 在 较 小 的 屏幕 上 ， 图 像 仍 是 一 个 适宜 的 尺寸 ， 不 会 挤 压 其 他 内 容 。 








[ 小 贴 士 ] 

我 们 可 以 通过 HTML 精确 设置 图 像 的 宽度 和 高 度 ， 这 在 过 去 曾经 是 常用 的 图 像 设置 方法 ( 例 
om «img src-'"image.jpg" alt-"alt text" width-'400" height-"200'»), 
但 是 ， 如 果 使 用 HTML iE XEM eg AR, 3tA d Ac mk, Aw, RARR de 
果 你 需要 指定 图 像 尺 寸 ， 用 CSS 来 设置 。 


6.5.4 媒体 查询 


当 屏 幕 变 察 直至 36 em 断 点 处 时 ， 页 面 变 成 单列 布局 。 图 像 占 据 了 单列 布局 的 一 半 宽 度 ， 
f£ 36 em 及 比 之 略 小 些 的 宽度 中 ， 这 仍 是 一 个 适宜 的 尺寸 。 





但 当 你 继续 减 小 视 口 的 宽度 ， 如 图 6-18， 会 发 现 图 像 实在 是 变 得 太 小 了 ， 以 至 无 法 看 清 细 
节 。 这 是 你 就 会 觉得 它 应 该 更 大 些 才 好 。 
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B 6-18: 屏幕 宽度 更 窄 和 时， 图 像 变 得 太 小 以 至 无 法 看 清 细 节 


修正 这 个 问题 很 简单 ， 我 们 只 需 添加 一 条 媒体 查询 ， 在 此 视 口 宽度 (ui^) 下 图 像 将 占 
据 整 列 宽度 ， 而 不 只 是 一 半 。 我 们 需要 在 28 em 处 添加 一 个 断 点 














一 次 ， 我 们 是 按 从 宽 至 罕 的 屏幕 GLO) 顺序 设置 图 像 ， 所 以 在 媒体 查询 中 要 用 max- 
width 取代 min-width, 








我 们 将 图 像 宽 度 设 置 为 auto， 这 使 得 图 像 将 以 其 实际 尺寸 (300 像素 宽 ) 显示 。 为 覆盖 我 
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们 先前 已 经 添加 的 样式 ， 我 们 需要 在 样式 中 加 入 float: none 使 其 不 再 向 右 浮动 ， 并 去 
除 我 们 在 有 文字 环绕 图 像 四 周 时 使 用 的 左 内 边 距 : 

















@media only screen and (max-width: 28em) { 
article img { width: auto; float: none; padding-left:0; } 
} 


现在 我 们 获得 的 显示 效果 如 图 6-19 所 示 。 
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86-19. XT7BUS, EIUS OSEE TT BESTE BANEEEOCEANZERUUIS] 


你 可 能 会 奇怪 ， 为 什么 是 按 从 宽 至 罕 的 方向 添加 图 像 媒体 查询 ， 而 不 是 像 先 前 那样 从 最 小 
屏幕 〈 视 口 ) 宽度 开始 。 事 实 上 我 们 可 以 选择 从 任何 一 个 方向 开始 。 具 体 到 为 网 站 添加 图 
像 ， 有 时 按 由 宽 至 罕 的 方向 要 更 加 容易 ， 因 为 图 像 尺寸 在 其 实际 宽度 上 是 有 硬性 限制 ， 不 
可 能 无 限制 扩大 (在 本 例 中 是 300 像素 )。 














当然 ， 在 样式 表 中 混合 使 用 min-width 和 max-width 媒体 查询 也 是 可 以 。 问 题 在 于 ， 对 
这 张 熊猫 图 像 我 们 的 默认 样式 (没有 任何 媒体 查询 ) 是 适用 于 较 宽 屏幕 的 ， 所 以 如 果 小 屏 
幕 不 支持 媒体 查询 的 话 ， 那 得 到 的 就 是 并 不 适用 于 它 的 宽屏 幕 图 像 。 

















但 不 用 担心 ， 即 便 是 同时 从 两 个 方向 添加 媒体 查询 ， 我 们 仍 可 以 轻松 地 翻转 其 中 的 一 些 媒 
体 查 询 ， 使 它们 转 为 相同 的 方向 (不 过 如 果 网 站 中 的 所 有 媒体 查询 都 是 按 一 个 方向 定义 这 
往往 能 减少 混乱 )。 


例如 ， 我 们 在 前 面 例子 中 使 用 的 这 些 样式 默认 是 适用 于 较 宽屏 幕 的 ， 然 后 再 用 媒体 查询 添 
加 用 于 较 罕 屏幕 的 样式 : 
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article img { float: 
Gmedia only screen and 


article img ( width: 


right; 


padding-left: 
(max-width: 28em) { 
auto; float: none; 


3$; 


) 
翻转 过 来 则 成 了 这 样 : 





article img ( } 


Gmedia only screen and 


article img { f1 
padding-bottom: 


) 


不 过 且慢 ， 为 什么 翻转 后 默认 用 于 较 罕 
应 用 任何 样式 ?这 是 因为 在 翻转 前 的 例子 中 所 有 用 于 较 窗 屏幕 的 样式 (width: 





float: none; 


而 在 翻转 之 后 ， 样 式 本 身 就 都 是 默认 值 ， 所 以 我 们 不 需要 再 显 式 地 声明 它们 。( 当 多 


oat: 


10px; 


padding-left: 


(min-width: 
padding-left: 


28em) { 
right; 


) 





屏幕 的 样式 ， 在 第 


paddingbottom:10px; 


padding-left:0; } 


3$; 


一 行 中 对 于 article 


0) 是 用 来 将 CSS 属性 恢复 成 默认 值 的 。 


img 没有 


auto; 


一 步 讲 ， 整 个 article img ( ] 行 也 是 不 必要 的 ， 因 为 其 中 没有 定义 额外 的 样式 。) 


6.5.5 “最 大 宽度 


在 网 站 上 使 用 max-width 是 使 响应 式 设计 正确 工作 的 关键 之 一 ， 它 实际 上 超级 简单 。 下 
面 举 个 例子 来 说 明 它 是 如 何 工作 的 。 


我 们 的 图 像 在 28 em 断 点 处 看 起 来 还 不 错 ， 当 然 我 们 需要 看 下 整个 设计 范围 ， 下 移 至 最 
宽度 320 像素 。 遗 憾 的 是 ， 问 题 产生 了 ， 见 图 6-20, 
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— Hr] REI S22em 左右 时 ， 图 像 的 宽度 超过 了 列 的 宽度 ! 不 仅 是 超出 了 列 的 边 
界 ， 图 像 右边 也 因为 超出 了 浏览 器 窗口 宽度 而 被 切断 。 

幸运 的 是 ， 这 个 问题 很 容易 解决 。 

我 们 肯定 不 想 只 简单 地 给 图 像 设置 一 个 百度 比 宽度 ， 因 为 我 们 想 要 它 尽 可 能 大 ， 直 到 300 
像素 的 实际 宽度 。 

相应 的 ， 我 们 可 以 使 用 一 个 非常 方便 的 属性 : max-width。 你 应 该 记得 在 第 5 章 中 我 们 使 
用 这 个 属性 告诉 我 们 的 两 列 布局 在 达到 某 一 视 口 宽度 后 不 再 继续 变 宽 。 在 那个 例子 中 ， 我 
们 设置 宽度 值 用 的 是 em 单位 。 


























对 于 这 幅 图 像 ， 我 们 将 设置 max-width 值 为 100%。 通 过 使 用 100%， 我 们 告诉 浏览 器 图 
像 的 显示 宽度 决 不 能 大 于 它 的 包含 元 素 的 宽度 ， 在 本 例 中 ， 就 是 决 不 能 超过 <article> 
元 素 的 宽度 : 


article img { max-width: 100%; } 





在 图 6-21 中 ， 最 左边 的 图 显示 的 是 28 em 宽度 下 的 页 面 布局 ， 我 们 可 以 看 到 尽管 图 像 是 以 
其 实际 尺寸 显示 的 ， 但 并 没有 完全 将 整 列 填 满 ， 在 我 们 将 窗口 变 得 更 窗 时 ， 图 像 也 随 之 变 
窑 来 与 列 宽 匹 配 ( 它 仍 将 呆 在 包含 元 素 内 部 决 不 会 超出 )。 
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图 6-21: 使 用 max-width:100%， 图 像 绝 不 会 宽 于 其 容器 


如 果 你 研读 过 很 多 关于 响应 式 设 计 的 资料 ， 你 可 能 已 经 知道 max-wiath 是 响应 式 设 计 
的 三 大 要 素 (流体 栅 格 、 弹 性 图 像 和 媒介 查询 ) 的 一 部 分 。 它 确实 至 关 重 要 ， 没 有 max- 
width， 响 应 式 网 站 将 无 法 工作 ， 因 为 你 会 经 常 遇 到 图 像 无 法 如 预料 那 般 适 配 的 问题 
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这 里 有 一 个 小 秘密 : 对 于 你 的 响应 式 网 站 ， 因 为 max-widath 对 于 图 像 是 如 此 重要 ， 可 以 简单 
地 将 它 应 用 于 整个 网 站 。 那 就 是 在 样式 表 中 添加 如 下 代码 (把 它 放 在 重 置 代码 下 面 就 好 ) : 




















img { max-width: 100%; } 











一 旦 你 这 样 做 了 ， 就 不 必 再 考虑 它 了 ， 就 这 么 简单 1 











尽管 你 并 不 需要 对 网 站 中 的 所 有 图 像 应 用 max-width:100% 样式 ， 但 其 并 无 任何 害处 ， 
因为 它 做 的 唯一 的 事情 就 是 确保 图 像 不 会 宽 过 它们 的 容器 元 素 。 它 不 影响 其 他 与 图 像 大 小 
有 关 的 事物 。 但 在 极 少 的 情况 下 ， 我 们 可 能 不 需要 将 max-width:100% 应 用 于 一 个 特定 
的 图 像 ， 那 么 对 该 图 像 简 单 地 添加 CSS 来 覆盖 默认 设置 就 可 以 了 。 





























[ 小 贴 士 ] 

Æ E7 及 其 更 早 的 版 本 的 浏览 器 中 使 用 max-width 会 产生 一 些 问题 ， 比 如 按 比 例 缩小 的 图 
像 显示 效果 不 好 。 如 果 你 需要 支持 这 些 浏 览 器 ， 查 看 Ethan Marcotte 在 博客 文章 所 介绍 的 一 
种 JavaScript 解决 方案 “Fluid Images”( http://unstoppablerobotninja.com/entry/fluid-images/ )。 


6.5.6 ARRE 


在 选取 放 到 网 站 上 的 图 像 时 ， 务 必 挑 选 有 趣 并 能 真实 传达 网 站 个 性 的 图 像 。 

















使 用 购买 的 素材 图 像 是 一 个 极 具 诱 惑 力 的 主意 ， 而 且 这 之 中 有 很 多 照片 确实 很 棒 ， 但 通常 
它们 并 未 经 过 精心 挑选 且 看 起 来 很 做 作 ， 使 人 一 眼 就 能 看 出 它们 是 素材 图 像 ， 这 让 你 的 网 
站 看 上 去 缺乏 个 性 。 








如 果 你 有 一 个 餐厅 网 站 ， 不 要 使 用 某 人 在 吃 汉 堡 之 类 的 素材 图 像 。 应 该 用 你 自己 餐厅 及 美 
食 的 真实 照片 ， 并 确保 照片 的 高 质量 ， 为 此 去 聘请 专业 的 摄影 师 是 值得 的 。 

最 重要 的 是 ， 尽 可 能 多 地 使 用 标题 。 照 片 的 故事 并 不 总 是 能 从 其 本 身 就 能 明显 看 出 来 。 繁 
忙 的 餐厅 的 照片 很 好 ,但 是 有 一 个 解读 标题 会 更 有 效 “繁忙 的 周 六 晚上 ， 餐 厅 总 是 早早 就 
坐 满 了 剧场 观众 ， 为 避免 等 待 请 记得 预约 ”。 


6.06 ”背景 图 像 


并 非 所 有 图 像 都 是 内 容 的 一 部 分 。 你 也 可 以 有 装饰 性 的 图 像 ， 这 能 增加 网 站 的 设计 感 ， 但 
不 会 增加 任何 意义 。 






































你 可 以 使 用 CSS 的 background-image 属性 来 添加 属于 样式 部 分 而 不 是 内 容 部 分 的 图 像 。 











不 要 用 background-image 添加 内 容 图 像 ， 因 为 使 用 屏幕 阅读 器 或 其 他 文本 浏览 器 的 人 们 是 
无 法 看 到 它们 的 。( 一 个 例外 : 实际 上 有 方法 可 以 显示 一 个 CSS 图 像 然后 用 HTML 提供 隐藏 
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可 见 网 站 中 的 替代 文本 ,但 这 种 方法 不 正规 且 困 难 ， 几 乎 不 可 能 成 为 一 个 好 的 设计 选择 。) 


6.6.1 加 入 背景 图 像 
比方 说 ， 我 们 要 在 示例 网 站 的 页 眉 部 分 添加 背景 图 像 。 


我 们 将 再 次 从 最 大 屏幕 宽度 开始 。 在 我 们 的 最 大 宽度 设计 中 ， 排 除 边 距 ， 页 眉 大 约 是 900 
We IR ORE C MEE E 
据 字 体 大 小 的 变化 它 能 变 得 更 高 ， 所 以 我 们 需要 使 横幅 图 像 足够 高 以 使 页 眉 能 肯定 被 覆盖 
( 见 图 6-22), 





图 6-22: ERE] ( 另 见 彩 插图 6-22) 
为 页 丑 添 加 背景 图 像 很 简单 。 你 可 以 在 图 6-23 中 看 到 结果 


header ( background-image: url(images/pandabanner.png); ] 
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图 6-23: 背景 图 像 加 入 到 页 眉 中 











你 会 注意 到 ， 横 幅 图 像 的 亮度 要 比 实际 的 照片 浅 。 这 就 是 所 谓 的 透明 度 (transparency) 或 











不 透明 度 (opacity)。 在 本 例 中 ， 


你 可 以 使 用 CSS 的 opacity 属 ! 





我 想 要 照片 浅 一 些 ， 这 样 就 不 会 影响 阅读 它 上 面 的 文字 。 


性 来 调整 内 容 图 像 的 不 透明 度 ， 但 要 在 背景 图 像 上 这 么 操 
































作 可 不 那么 容易 。 因 此 我 先 在 图 像 编 辑 软件 中 改变 图 像 的 透明 度 ， 然 后 再 上 传 到 网 站 中 。 





6.6.2 ”对 齐 


如 果 你 把 浏览 器 窗口 变 窄 ， 看 看 横幅 图 像 的 显示 ， 你 会 注意 到 原来 多 少 还 算是 在 横幅 图 像 


中 央 的 熊猫 现在 偏向 了 右边 ， 如 





图 6-24 所 示 。 
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图 6-24. 对 于 较 窄 的 屏幕 宽度 ， 横 幅 图 像 不 再 是 居中 的 
这 是 因为 ， 横 幅 图 像 是 左 对 齐 (默认 ) 的 ， 图 像 的 最 右边 因为 在 元 素 中 容 不 下 而 被 切断 了 。 


不 像 内 容 图 像 ， 背 景 图 像 是 作为 样式 应 用 于 元 素 的 ， 所 以 它 永远 不 会 超出 元 素 的 边界 (你 
根本 看 不 到 图 像 的 超出 部 分 )。 因 此 ， 没 有 必要 设置 max-width。 




















默认 情况 下 ， 背 景 图 像 对 齐 于 左上 角 。 可 以 使 用 background-position 属性 连同 两 个 值 














一 道 在 水 平方 向 〈 沿 x 轴 ) 和 垂直 方向 QE y) 上 对 齐 图 像 。 





在 我 们 的 例子 中 ， 我 们 既 要 居中 
面 这 样 做 : 








图 像 ， 又 要 保持 它 在 顶部 ， 如 图 6-25 所 示 。 我 们 可 以 像 下 


header ( background-image: url(images/pandabanner.png); 
background-position: center top; } 
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图 6-25: 可 以 使 用 背景 定位 使 图 像 居 中 
你 也 可 以 使 用 百分比 或 固定 的 度量 单位 (比如 像素 ) 来 对 齐 背 景 图 像 。 


6.7 ”响应 式 图 像 


在 响应 式 网 页 设计 中 一 个 主要 的 讨论 话题 是 响应 式 图 像 。 我 们 如 何 为 大 屏幕 提供 相应 尺寸 
的 图 像 以 充分 利用 屏幕 空间 ， uud ne ec el 
如 何 提供 清晰 的 图 像 给 高 分 辩 率 屏幕 ， 而 不 是 把 这 些 大 文件 发 送 给 不 需要 它们 的 只 有 低 分 
办 率 屏 幕 的 设备 ? 


如 果 我 们 有 多 个 尺寸 的 图 像 文件 用 于 不 同 的 屏幕 ， 我 们 要 确保 设备 仅 下 载 它们 需要 的 那个 
图 像 ， 而 不 是 全 部 。 


人 们 提出 了 大 量 可 能 的 解决 方案 ， 我 们 在 这 里 讲述 一 些 最 流行 的 解决 方案 ， 但 没有 一 个 是 
完美 的 。 


在 未 来 的 几 年 ， 在 该 问题 上 很 可 能 会 有 更 多 的 讨论 ， 也 绝对 有 可 能 产生 其 他 响应 式 图 像 解 
决 方案 。 


现 有 解决 方案 的 一 个 主要 问题 是 ， 它 们 全 都 太 复 杂 。 很 多 网 页 内 容 并 非 是 由 开发 人 员 创 建 
的 ， 人 们 使 用 内 容 管理 系统 (CMS) 来 编辑 自己 的 网 站 。 所 见 即 所 得 (WYSIWYG, What 
You See Is What You Get) 的 编辑 器 让 网 站 编辑 通过 点 击 按钮 并 选择 文件 即 可 添加 图 像 。 
例如 ， 在 一 篇 博客 文章 中 添加 一 张 照 片 。 尽 管 这 其 中 的 一 些 解 决 方案 可 以 集成 到 CMS m, 
但 网 站 编辑 们 几乎 无 法 干涉 去 选择 最 佳 的 图 像 尺 寸 (也 可 能 不 具 这 样 做 的 知识 )。 
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即使 对 于 开发 者 来 说 ， 如 果 一 种 响应 式 图 像 技术 过 于 复杂 ， 那 很 多 人 就 会 回避 它 ， 并 继续 
使 用 简单 直接 的 <img> 元 素 。 


创建 多 个 图 像 来 切换 也 不 是 未 来 友好 型 的 。 我 们 基于 今天 的 屏幕 大 小 来 选择 图 像 尺 寸 和 分 
辨 率 ， 但 它们 在 将 来 可 能 过 然 不 同 。 


6.7.1 建议 的 客户 端 解决 方案 
理想 的 情况 下 ， 应 该 有 一 各 方法 基于 设备 性 能 ， 使 用 被 所 有 浏览 器 支持 的 HTML/CSS 来 切 
换 图 像 。 












































这 是 W3C 响应 式 图 像 社团 (http://responsiveimages.org) 正在 努力 达成 的 目标 。 


不 幸 的 是 ， 此 项 工作 还 在 进行 中 。 有 两 种 可 能 的 响应 式 图 像 解决 方案 ，<picture> 元 素 和 
srcset 属性 ， 但 这 两 者 没有 被 任何 一 个 主流 的 浏览 器 实现 ， 并 且 也 还 不 是 HTML 规范 的 
一 部 分 。 

这 两 种 解决 方案 或 全 部 或 其 中 一 个 很 可 能 成 为 将 来 的 HTML 规范 的 一 部 分 ， 所 以 我 们 在 
这 简略 地 介绍 它们 ， 你 可 以 了 解 它们 是 如 何 工作 的 (尽管 你 还 并 不 能 在 你 的 网 站 上 使 用 
«picture» 元 素 或 srcset 属性 )。 























在 本 章 稍 后 的 内 容 中 ， 我 们 将 探讨 当前 可 使 用 的 其 他 解决 方案 。 











1. srcset 
加 入 到 «img» 元 素 的 srcset 属性 允许 你 指定 并 上 传 同 一 图 像 的 多 个 版 本 〈 不 同 的 文件 )， 
浏览 器 将 会 只 下 载 它 需要 的 那个 文件 ， 而 不 是 所 有 文件 。 


目前 ，<img> 元 素 的 src 属性 允许 你 指定 一 个 图 像 文件 ， 而 srcset 属性 将 允许 你 指定 
多 个 文件 (以 辟 号 分 隔 )。 每 一 个 图 像 文 件 将 根据 它 适 用 的 视 口 宽度 或 像素 密度 进行 标记 。 
然后 浏览 器 将 选取 最 合适 的 图 像 ， 下 载 并 显示 它 。 


让 我 们 来 看 个 例子 : 





























«img src-"images/flower.jpg" alt-"a flower" srcset- 
"images/flower-HD.jpg 2x, images/flower-small.jpg 600w, 
images/flower-small-HD.jpg 600w 2x"> 





在 本 例 中 ， 默 认 的 图 像 是 flower.jpg。 而 高 密度 屏幕 (像素 密度 大 于 等 于 2) 则 使 用 flower- 
HD.jpg。 对 于 小 于 600 像素 宽 的 窄 屏幕 ， 则 使 用 flower-small.jpg。 而 对 于 小 于 600 像素 宽 
的 高 密度 屏幕 ， 则 使 用 flower-small-HD.jpg。 























如 有 果 设 备 的 条 件 发 生变 化 ， 图 像 能 够 被 立即 替换 。 例 如 ， 如 果 你 旋转 平板 电脑 屏幕 使 得 视 
口 宽度 发 生变 化 ， 浏 览 器 会 检查 它 是 否 需 要 从 srcset 下 载 另 一 不 同 的 图 像 。 




















注意 ， 你 可 以 通过 最 大 视 口 宽度 指定 图 像 (如 本 例 中 600w)， 它 具有 与 max-width 媒体 
查询 相同 的 效果 (如 果 视 口 最 大 是 600 像素 帘 ， 则 使 用 这 个 图 像 )。 但 遗憾 的 是 ，srcset 
只 能 用 于 最 大 宽度 ， 不 能 用 于 最 小 宽度 。 


不 支持 srcset 的 老式 浏览 器 将 忽略 其 他 选项 ， 并 使 用 src 属性 中 的 默认 图 像 。 





























2. «picture» 
与 srcset —jfÉ, «picture» 元 素 人 允许 你 指定 并 上 传 同一 图 像 的 多 个 版 本 ， 浏 览 器 只 会 下 
载 它 需 要 的 那个 文件 ， 而 不 是 所 有 的 文件 : 


«picture» 

«source media-" (min-width: 45em)" src-"images/flowerlarge.jpg"» 
«source media-" (min-width: 18em)" src-"images/flowermedium.jpg"» 
«source src-"flower-small.jpg"» 

«img src-"images/flower-small.jpg" alt-"a flower"> 

«/picture» 





你 可 以 在 这 个 例子 中 看 到 ，media 属性 使 用 的 语法 与 CSS 媒体 查询 非常 相似 。 你 可 以 用 
min-width 或 max-width 来 查询 。 


对 于 大 于 等 于 45 em 的 视 口 ， 浏 览 器 将 使 用 第 一 个 «source»: flower-large.jpg。 对 于 大 于 
等 于 18 em， 但 小 于 45 em 的 视 口 ， 浏 览 器 将 用 第 二 个 <source>: flower-medium.jpg。 而 
对 于 其 他 视 口 (小 于 18 em)， 浏 览 器 将 使 用 第 三 个 «source» (flower-smalljpg)， 该 条 语 
名 中 不 含 媒体 查询 。 


你 会 注意 到 默认 图 像 放 在 最 后 ， 这 正好 与 我 们 在 CSS 中 使 用 媒体 查询 的 顺序 相反 ， 在 CSS 
中 我 们 是 先 以 默认 值 开始 ， 后 面 放置 媒体 查询 。 


不 支持 的 <zpicture> 元 素 的 浏览 器 将 忽略 它 ， 并 使 用 备用 的 «img» 元 素 ， 其 位 于 
«picture» TAZ. 


如 果 你 既 要 基于 视 口 宽度 的 媒体 查询 ， 又 要 使 用 具有 不 同 分 辩 率 版 本 的 图 像 ， 你 可 以 组 合 
使 用 «picture» 元 素 和 srcset 属性 : 



























































«picture» 

«source media-" (min-width: 45em)" srcset-"flower-large.jpg 1x, 
flower-large-hd.jpg 2x"> 

«source media-" (min-width: 18em)" srcset-"flower-med.jpgix, 
flower-med-hd.jpg 2x"> 

«source srcset-"flower-small.jpg 1x, flower-small-hd.jpg2x"'» 
«img src-"flower-small.jpg" alt-"a flower"> 

«/picture» 


6.7.2 ”其 他 解决 方案 


还 有 其 他 啊 应 式 图 像 解决 方案 可 用 ， 但 它们 主要 是 腻子 脚本 。 腻 子 脚本 是 一 段 代码 ， 复 
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制 新 的 HTML/ CSS 功能 至 旧 浏 览 器 中。 其 中 的 一 些 复 制 了 拟 议 中 的 «picture» 元 素 和 
srcset 属性 的 行为 。 使 用 腻子 脚本 的 缺点 是 ， 它 需要 向 网 站 增加 额外 的 代码 。 


没有 一 种 解决 方案 能 完美 应 对 所 有 的 使 用 场合 ， 所 以 你 需要 了 解 每 个 方案 的 优 缺 点， 以 及 
应 该 在 何 时 使 用 它们 。 如 果 想 在 响应 式 图 像 解 决 方案 之 中 做 出 选择 ， 可 以 参考 CSS-Tricks 
上 由 Chris Coyier 撰写 的 “Which responsive images solution should you use ? ” (http://css- 
tricks.com/which-responsive-images-solution-shouldyou-use/) 一 文 ， 文 中 对 多 种 解决 方案 进 
行 了 比较 。 





























1. Picturefill 

尽管 实际 上 你 还 不 能 使 用 «picture» 元 素 (因为 它 还 未 被 浏览 器 实现 )， 不 过 Scott Jehl 
创建 了 一 个 名 为 Picturefill (https://github.com/scottjehl/picturefill) 的 腻子 脚本 ， 本 质 上 是 用 
JavaScript 做 同样 的 事情 。 

















要 使 用 Picturefil， 访 问 其 官方 网 站 并 按照 说 明 进行 操作 。 你 需要 将 picturefilljs 文件 添加 
到 网 站 中 。 





Picturefill 代码 使 用 与 «picture» 元 素 类 似 的 语法 : 


«span data-picture data-alt-"a flower"> 

«span data-src-"images/flower-small.jpg"»«/span» 
«span data-src-"images/flower-medium.jpg" 
data-media-" (min-width: 18em)"»«/span» 

«span data-src-"images/flower-large.jpg" 
data-media-" (min-width: 45em) "></span> 
<noscript><img src="images/flower-small.jpg" alt="a 
flower"></noscript> 

</span> 


Picturefill 的 JavaScript 脚本 使 用 <span> 元 素 为 视 口 创建 一 个 合适 尺寸 的 元 素 。 在 
<noscript> 元 素 中 包含 的 图 像 则 是 为 不 支持 JavaScript 的 浏览 器 准备 的 。 














对 于 高 密度 屏幕 ， 你 也 可 以 使 用 Picturefill 基于 分 辩 率 为 浏览 器 赋予 图 像 选项 。 





2. Adaptive Images 
Adaptive Images 〈 自 适应 图 像 ) 是 另 一 种 用 于 响应 式 图 像 的 腻子 脚本 。 它 是 一 个 服务 器 端 
解决 方案 ， 这 意味 着 网 站 托管 服务 器 需要 做 一 些 准 备 工 作 ， 而 不 仅仅 是 HTML 和 CSS, 


其 工作 原理 不 同 于 先前 描述 的 响应 式 图 像 解 决 方案 ， 你 只 需要 创建 一 个 全 尺寸 版 本 的 图 
像 。Adaptive Images 检测 用 户 的 屏幕 尺寸 (不 是 视 口 )， 并 为 之 创建 和 提供 一 个 与 屏幕 相 
称 的 经 过 尺寸 调整 的 图 像 版 本 。 
































要 使 用 此 腻子 脚本 ， 服 务 器 需要 运行 有 Apache 和 PHP， 所 以 Adaptive Images 并 不 适用 于 
所 有 网 站 。 但 只 要 服务 器 上 有 这 些 (它们 很 常见 )， 你 可 以 很 容易 为 任何 网 站 加 入 Adaptive 

















Images 功能 ， 因 为 它 完全 不 需要 为 图 像 改 变 HTML 代码 ， 你 只 需 使 用 普通 的 <img> 7038. 


因为 不 用 改变 HTML， 这 很 可 能 是 添加 响应 式 图 像 到 现 已 有 网 站 的 最 好 方案 ， 这 些 网 站 不 
可 能 退回 去 改变 原 有 遗留 内 容 的 代码 。 





要 在 网 站 上 安装 Adaptive Images， 从 Adaptive Images 网 站 下 载 文 件 (http://adaptive- 
images.com)， 然 后 按照 说 明 安 装 ， 包 括 编辑 网 站 的 htaccess 文件 ， 并 添加 一 些 JavaScript 
到 页 面 的 «head» 元 素 中 。 








然后 在 你 希望 改变 图 像 尺 寸 的 位 置 ( 视 口 宽度 ) 选择 并 设置 断 点 。 因 为 上 传 的 是 图 像 的 最 
大 尺寸 版 本 ， 断 点 是 在 此 宽度 上 该 图 像 将 变 小 。( 请 注意 ， 断 点 是 以 像素 单位 设置 的 ， 而 
不 是 我 们 在 本 书 前 面 的 例子 中 使 用 的 em 单位 。) 


所 以 ， 如 果 你 的 断 点 设置 为 800 像素 和 400 像素 ， 并 且 上 传 的 图 像 是 1000 像素 宽 ， 其 将 被 
调整 成 两 个 尺寸 的 版 本 : 800 像素 宽 和 400 像素 宽 (当然 ， 图 像 的 高 度 也 会 作 相应 的 调整 )。 



























































浏览 器 加 载 网 页 时 ， 每 当 它 遇 到 一 个 «ims» 元 素 ， 就 从 服务 器 请 求 图 像 。Adaptive Images 
代码 将 检查 用 户 屏幕 宽度 ， 并 挑选 大 于 等 于 屏幕 宽度 的 最 小 的 图 像 。 因 此 ， 如 果 屏 幕 宽 
320 像素 ， 其 将 选取 400 像素 的 图 像 (基于 在 先前 设置 的 断 点 ) ， 如 果 屏 幕 宽度 为 700 像 
素 ， 它 会 选择 800 像素 的 图 像 。 


如 果 你 上 传 的 图 像 只 有 500 像素 宽 ， 这 是 你 需要 它 在 屏幕 上 的 最 大 宽度 ， 那 么 它 只 会 被 调 
整 为 400 像素 的 断 点 。 图 像 决 不 会 变 得 更 大 。 


当 一 个 图 像 被 请 求 时 ， 服 务 器 会 根据 请 求 的 尺寸 自动 创建 一 个 文件 。 然 后 ， 它 会 缓存 图 像 
以 节省 下 一 次 请 求 的 图 像 创建 开销 ， 因 此 ， 仅 有 在 断 点 范围 内 第 一 个 访问 网 站 的 用 户 会 有 
轻微 的 延迟 ， 因 为 会 创建 额外 的 图 像 。 

腻子 脚本 的 一 个 缺点 是 它 仅 根据 屏幕 尺寸 来 调整 图 像 的 尺寸 ， 而 不 是 图 像 将 要 被 显示 的 尺 


寸 。 所 以 不 按 全 屏 宽度 显示 的 图 像 不 太 可 能 获得 一 个 按 比例 缩小 的 图 像 版 本 ， 即 使 存在 这 
样 合适 的 版 本 。 












































































































































此 腻子 脚本 需要 JavaScript 才能 正常 运行 。 在 不 支持 JavaScript 的 浏览 器 中 ，Adaptive 
Images 将 不 会 运行 ， 浏 览 器 会 显示 <img> 元 素 中 原始 的 全 尺寸 图 像 。 

Adaptive Images 是 根据 知识 共享 协议 (Creative Commons) 授权 的 ， 只 要 保留 作者 Matt 
Wilcox 的 署名 即 可 免费 使 用 ， 此 外 也 有 适用 于 WordPress 和 Drupal 的 插件 可 供 使 用 。 


3. HiSRC 
HiSRC (https://github.com/teleject/hisrc) 是 一 个 由 Chris Schmitt 编写 的 jQuery 插件 ， 允 许 
基于 网 速 和 屏幕 分 状 率 来 切换 图 像 。 














ER | M 





对 于 每 个 图 像 ， 浏 览 器 会 首先 加 载 一 个 低 分 辨 率 的 “移动 优先 ”版 。 浏 览 器 通过 JavaScript 检 
查 连接 的 速度 ， 并 且 如 果 设 备 使 用 的 是 如 3G 这 样 的 移动 通讯 网 络 ， 图 像 会 保持 为 低 分 辨 率 
版 本 。 如 果 有 更 多 的 可 用 带宽 ， 它 会 下 载 一 个 更 高 分 辩 率 的 版 本 ， 并 用 新 的 图 像 文件 替换 原 
来 的 低 分 辨 率 图 像 。 如 果 还 检测 到 屏幕 是 高 密度 屏 ， 它 也 将 下 载 合适 的 版 本 并 替换 原 图 像 。 


要 使 用 HiSRC， 你 需要 添加 jQuery 到 网 站 中 ， 并 上 传 和 链接 HiSRC 的 JavaScript 文件 。 
你 还 需要 为 每 个 图 像 制作 并 上 传 了 三 个 版 本 的 副本 。 


至 于 HTML 则 很 简单 ， 你 需要 一 个 具有 恰当 class 属性 的 «div» 元 素 ， 且 <img> 元 素 需 
要 额外 的 属性 来 指定 三 个 图 像 文件 : 


«div class="hisrc"> 

«img src-"images/flower-mobile.png" data-1x-"images/ 
flower-400x200.png" data-2x-"images/flower-800x400.png"» 
«/div» 













































































[ 小 贴 士 ] 

你 不必 对 网 站 上 的 所 有 图 像 都 使 用 HiSRC。 如 果 你 不 想 将 其 用 于 特定 的 图 像 ， 只 需 使 
用 «img» 元 素 而 不 要 人 额外 的 <div> 元 素 。 另 一 个 提供 响应 式 图 像 的 JavaScript 插件 是 
Foresight.js ( https://github.com/adamdbradley/foresight.js ). 


4. 第 三 方 服务 

有 数 家 公司 提供 了 能 自动 调整 图 像 尺 寸 以 适应 屏幕 宽度 的 响应 式 图 像 服 务 。 比 如 ， 我 们 可 
以 看 下 Sencha.io SRC (http://www.sencha.com/learn/how-to-use-srcsencha-io/ )。 这 项 第 三 方 
服务 对 小 型 网 站 是 免费 的 。 

















[小 贴 士 ] 
其 他 提供 响应 式 图 像 服务 的 第 三 方 网 站 还 有 ReSRC (http://www.resrc.it ), Thumbr.io ( http:// 
www.thumbr.io ) 和 Responsive.io ( https://responsive.io )。 服 务 价格 通常 基于 图 像 的 数量 或 每 


月 的 总 流量 。 


第 三 方 响应 式 图 像 服务 的 工作 方式 是 首先 检测 设备 的 品牌 和 型 号 ， 然 后 利用 这 些 信 息 来 确 
定 屏 幕 的 大 小 。 它 缩放 图 像 至 设备 屏幕 宽度 ， 并 在 高 速 缓存 中 保留 图 像 30 分 钟 ， 因 此 相 
同 设备 发 起 的 后 续 请 求 会 变 得 更 快 。 


所 有 你 需要 做 的 就 是 添加 Sencha 服务 器 的 URL (http:/src.sencha.io/) 到 图 像 的 src 属性 中 。 



































例如 ， 如 果 这 是 你 的 «img» 元 素 : 


«img src-"http://www.example.com/images/butterfly.jpg" alt-"butterfly"» 





你 可 以 像 下 面 这 样 加 入 Sencha 服务 器 的 URL. (请 注意 ， 也 必须 对 图 像 使 用 完整 的 URL, 
比如 http:Wwww.example.conyimages/butterfly.jpg， 而 不 是 像 这 样 的 相对 链接 ) : 








«img src-"http://src.sencha.io/http://www.example.com/images/ 
butterfly.jpg" alt-"butterfly"- 

















AR] 





图 像 将 被 调整 到 设备 屏幕 宽度 的 尺寸 。 这 意味 着 如 果 
上 ， 该 图 像 文 件 将 大 于 它 理想 的 宽度 。 


如 果 想 要 调整 图 像 为 特定 的 尺寸 ， 则 可 以 在 URL 中 包含 宽度 和 高 度 ， 比 如 像 下 面 的 例子 
那样 。 或 者 只 指定 宽度 (会 自动 限制 高 度 ) : 








像 实际 是 以 百分比 宽度 显示 在 屏幕 




















«img src-"http://src.sencha.io/400/200/http://www.example.com/ 
images/butterfly.jpg" alt-"butterfly"- 


更 有 用 的 是 ， 你 可 以 使 用 百分比 。 如 有 果 你 想 要 调整 一 个 图 像 的 尺寸 ， 并且 知道 在 设计 中 它 


决 不 会 占据 超过 50% 的 屏幕 宽度 ， 下 面 的 代码 将 调整 其 大 小 使 其 决 不 超过 设备 屏幕 宽度 的 
50% : 





























«img src-"http://src.sencha.io/x50/http://www.example.com/images/ 
butterfly.jpg" alt-"butterfly"- 





其 至 你 可 以 指定 50% 的 宽度 ，25% 的 高 度 : 


<img src="http://src.sencha.io/x50/x25/http://www.example.com/ 
images/butterfly.jpg" alt="butterfly"> 














Sencha 还 可 以 做 一 大 堆 其 他 的 事情 ， 包 括 缩减 图 像 尺 寸 至 给 出 的 像素 量 ， 使 用 公式 (上述 
参数 的 任意 组 合 ) 处 理 图 像 ， 以 及 改变 文件 格式 。 


请 记 住 ， 在 使 用 第 三 方 服务 时 ， 网 站 部 分 内 容 的 呈现 会 依赖 于 此 服务 。 而 像 Sencha 这 样 的 
第 三 方 服务 总 会 有 极 小 的 可 能 性 在 毫 无 征兆 的 情况 下 突然 不 复 存在 ， 这 将 从 根本 上 和 弄 垮 你 
的 网 站 。 更 常见 的 可 能 则 是 有 时 第 三 方 网 站 暂时 关闭 或 变 慢 ， 这 都 将 影响 你 的 网 站 的 性 能 。 
如 果 你 不 想 依赖 第 三 方 解 决 方案 ， 并 且 你 有 一 个 值得 付出 努力 的 非常 大 的 站 点 ， 可 以 在 你 
自己 的 服务 器 上 建立 一 套 类 似 的 系统 。 
































6.7.3 HA 
这 其 中 的 一 些 响 应 式 图 像 解决 方案 需要 选择 一 个 或 多 个 断 点 (也 就 是 视 口 宽度 ， 在 这 个 宽 
度 上 图 像 对 应 的 文件 将 发 生变 化 )。 那 么 该 如 何 来 选择 这 些 断 点 呢 ? 


如 果 响 应 式 图 像 是 以 不 同 视 角 的 剪裁 版 来 显示 图 像 ， 而 不 仅仅 是 同一 图 像 的 不 同 分 辩 率 ， 
你 可 能 需要 使 图 像 断 点 与 布局 断 点 保持 一 致 。 
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而 如 果 是 在 不 同 的 分 





要 下 载 的 文件 六 





如 果 你 使 用 Picturefill (我 们 会 
图 像 单独 设置 断 点 ， 因 此 


图 像 在 屏幕 上 的 最 小 和 最 大 尺寸 ， 这 样 
图 像 各 自 的 文件 大 小 ， 


各 断 点 之 间 相 距 多 远 是 随意 的 。 如 果 网 站 的 每 
设置 得 更 密 一 些 ， 从 而 耗费 最 少 的 带宽 。 
要 创建 一 个 图 像 版 本 。 


每 个 





首先 确定 该 
你 需要 确定 两 





种 尺寸 变化 都 需 
或 者 ， 如 果 网 站 的 每 个 页 面 上 


个 额外 的 工作 。 


以 20 KB 的 文件 大 小 作为 


检查 文件 大 小 ， 





例如 ， 女 


个 


0 果 显 示 在 设计 中 的 





不 需要 那么 大 时 ， 将 
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K 6-1 所 示 的 图 像 列 表 。 


表 6-1: 
图 像 大 小 


能 的 图 像 断 点 示例 


文件 大 小 





960 x 720 
780 x 585 
600 x 450 
500 x 375 
320 x 240 


为 区 分 不 同 版 本 
接 下 来 ， 你 需要 对 这 些 文人 





显示 ， 那 简单 ， 


在 开始 时 应 该 将 最 大 的 
像 。 你 把 最 大 图 像 作为 默认 


因此 ， 对 于 最 宽 的 屏幕 ， 我 们 显示 


默认 的 图 





108 KB 
85 KB 
63 KB 
43 KB 
19 KB 











只 需 将 断 点 与 图 








pa 














辩 率 下 使 用 同一 


图 





像 ， 则 根本 无 需 依赖 布局 。 取 而 代 之 ， 你 应 该 是 在 














EE 





像 作为 默认 





在 下 一 个 例子 中 用 到 ) 或 者 其 他 的 解决 方案 ， 
你 需要 做 一 点 额外 的 工作 来 使 每 个 


像 切换 到 另 一 个 版 本 。 


它们 允许 你 为 
像 都 是 最 好 的 选择 。 





pa 














尔 就 知道 图 像 的 宽度 限制 是 多 少 。 接 着 


接着 来 决定 它们 之 间 的 断 点 设置 。 


每 个 页 面 上 都 有 大 量 的 图 像 ， 你 可 能 希望 断 点 
当然 ， 这 意味 着 要 创建 更 多 的 图 像 文 件 ， 对 应 每 


























有 少量 


像 之 间 的 间隔 
并 根据 文件 大 小 每 隔 20 KB 设置 一 个 断 点 。 


图 像 宽 度 是 在 320 像素 和 960 像素 之 间 


WR] 





能 认为 只 为 节省 几 KB 根本 不 值得 做 这 





像 ， 你 可 





是 一 个 好 的 开始 。 尝 试 调整 图 像 为 不 同 的 尺寸 ， 








图 像 ， 你 可 以 在 文件 名 中 包含 宽度 ， 比 如 panda960.jpg。 


F 逐 一 设置 媒体 查询 。 如 果 图 
像 宽 度 相 匹配 即 可 。 


是 以 全 宽 视 





像 是 类 似 横幅 广告 








ra 


WA BE 


像 。 对 于 不 支持 JavaScript 的 浏览 器 ， 它 











pa 























图 像 panda960.jpg， 其 





人 象 ， 那 么 它 将 适用 于 所 有 的 屏幕 尺寸 。 
宽度 为 960 像素 (我 们 已 经 确 

















定 这 将 是 被 显示 图 像 中 最 宽 的 )， 它 既 可 以 以 960 像素 显示 ， 也 可 以 按 比例 缩小 至 较 小 的 
尺寸 。 
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对 于 第 一 条 媒体 查询 ， 它 的 意思 是 说 如 果 视 口 宽度 小 于 等 于 〈 最 大 不 超过 ) 780 像素 ， 浏 


IA nu 


览 器 应 该 使 用 panda780.jpg RERU RR. BREI 








放 到 更 小 的 尺寸 ， 但 绝 不 会 大 于 其 实际 尺寸 。 


能 是 以 780 像素 的 宽度 显示 ， 也 可 以 缩 


注意 ， 在 这 个 例子 中 ， 我 们 使 用 的 度量 单位 是 像素 而 不 是 em， 因为 我 们 是 以 像素 为 单位 











匹配 图 像 尺 寸 的 : 

















<span data-picture data-alt-"A panda eating bamboo."> 
«span data-src-"images/panda960.jpg"»«/span» 
«span data-src-"images/panda780.jpg" 


data-media-" (max-width: 


780px) "></span> 


<span data-src="images/panda600.jpg" 


data-media=" (max-width: 


600px) "></span> 


<span data-src="images/panda500.jpg" 


data-media=" (max-width: 





500px) "></span> 


<span data-src="images/panda320.jpg" 


data-media=" (max-width: 


320px) "></span> 


<noscript><img src="images/panda320.jpg" alt="a 


flower"></noscript> 


</span> 


请 记 住 ， 以 上 我 们 创建 了 该 图 像 大 小 依次 相差 20 KB 左右 的 505E 




















但 这 


T 








只 适用 于 这 个 特定 的 图 像 。 如 有 果 是 对 另 一 幅 图 像 
同 ， 宽 度 也 会 有 所 不 同 。 因 此 ， 以 这 种 方式 优化 
无 疑 也 会 涉及 大 量 的 手工 工作 。 























改 同样 的 事情 ， 可 能 要 创建 的 版 本 数量 不 
图 像 ， 能 将 带宽 的 浪费 减 至 最 小 程度 ， 但 





另 一 种 选择 是 只 选 几 个 断 点 并 根据 这 些 断 点 调整 所 有 图 像 的 尺寸 。 你 仍 要 为 每 个 图 像 创建 
各 种 尺寸 的 副本 ,但 你 不 必 花 费时 间 计 算 文 件 大 小 来 确定 每 个 图 像 的 最 佳 断 点 。 当 然 缺 点 
是 无 法 像 逐 一 计算 每 个 图 像 的 文件 大 小 那样 能 节省 那么 多 的 带宽 。 


要 想 获得 图 






































像 断 点 选择 的 更 多 信息 ， 阅 读 Jason Grigsby 在 Cloud Four Blog 上 的 文章 


"Sensible jumps in responsible image file sizes" (http://blog.cloudfour.com/sensible-jumps-in- 


responsive-image-file-sizes/) 。 


6.8 


不 管 是 对 于 网 站 的 内 容 还 是 对 于 网 站 的 设计 布局 ， 


总 结 


1 £A 





图 像 都 是 一 个 关键 部 分 。 


我 们 可 以 在 网 站 上 使 用 JPEG、GIFE、PNG 或 SVG 格式 的 图 像 文件 。 应 该 使 用 哪 种 文件 
格式 取决 于 你 拥有 哪 种 格式 的 图 像 。 应 使 每 个 图 像 文件 尽 可 能 的 小 ， 以 减少 下 载 它 所 需 


的 时 间 。 








在 网 站 上 显示 
内 容 图 像 使 用 <img> 元 素 ， 装 饰 图 
































图 像 时 ， 首 先 确 定 你 是 否 真 的 需要 用 到 图 像 ， 还 是 可 以 用 CSS 样式 来 代替 。 
像 使 用 CSS background-image 属性 。 拼 合 图 像 和 图 
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标 字 体 可 以 帮助 你 降低 图 像 所 需 的 带宽 。 


在 响应 式 网 站 上 图 像 应 具有 灵活 性 。 使 用 max-width 来 确保 图 像 不 会 超出 包含 它们 的 元 
素 。 你 可 以 在 布局 中 浮动 图 像 来 获得 文字 环绕 效果 。 

内 容 图 像 需 要 设置 替代 文本 ， 这 样 在 无 法 看 到 图 像 的 时 候 ， 它 们 的 信息 仍然 可 被 看 到 。 确 
保 你 的 替代 文本 提供 与 图 像 相 同 的 信息 ， 而 图 像 信息 又 应 与 其 使 用 场景 相关 。 

















高 密度 屏幕 需要 更 高 分 辩 率 的 图 像 ， 但 应 该 避免 让 那些 并 不 需要 高 分 辩 率 图 像 的 设备 下 载 
它们 。 有 很 多 种 方法 可 用 于 让 浏览 器 只 下 载 它 需要 的 图 像 。 




















«picture» 元 素 允 许 你 根据 视 口 的 宽度 指定 不 同 的 图 像 ， 但 它 尚 未 被 浏览 器 实现 。 现 在 可 
以 用 到 的 一 个 选择 是 Picturefill 腻子 脚本 ， 其 他 选择 包括 Adaptive Images 和 诸如 Sencha.io 
这 样 的 第 三 方 服务 。 














选择 图 像 切 换 的 断 点 时 ， 应 基于 要 下 载 图 像 的 尺寸 ， 当 不 再 需要 那么 大 尺寸 的 图 像 时 应 切 
换 成 更 小 的 图 像 文件 。 





T 





响应 式 图 像 领域 仍 在 不 断 发 展 之 中 ， 请 务必 保持 对 该 领域 出 现 的 新 思路 和 新 解决 方案 的 关 
注 ， 以 便 我 们 能 第 一 时 间 用 上 。 

现在 ， 我 们 已 经 接触 了 创建 响应 式 网 站 涉及 的 所 有 主要 知识 。 在 第 7 章 中 ， 我 们 将 开始 学 
习 创 建 响应 式 网 站 的 流程 。 








第 三 部 分 





玩 转 啊 应 陈 仅 计 


第 7 章 


啊 应 式 设计 工 作 流程 








对 响应 式 网 站 有 了 全 面 的 了 解 并 不 等 于 就 能 够 创建 响应 式 网 站 了 ， 它 们 完全 是 两 码 寻 
在 本 章 中 ， 我 们 将 审视 创建 响应 式 设 计 的 全 过 程 ， 首 先 从 用 户 研 究 和 内 容 策略 人 手 ， 然 后 
是 以 文本 模式 进行 设计 ， 绘 制 草图 及 创建 响应 式 原型 。 

我 们 将 学 习 样 式 板 及 其 他 新 的 设计 方法 来 取代 在 创建 固定 宽度 的 非 响应 式 设 计 中 所 使 用 的 
Photoshop 之 类 的 传统 工具 。 


Rn 
3 












































在 本 章 结尾 ， 我 们 将 讲述 如 何 向 客户 与 同事 推销 响应 式 设计 ， 以 及 在 进行 响应 式 项 目 设计 
时 如 何 调整 工作 方式 来 与 客户 共事 。 


如 果 想 要 更 加 深入 地 研究 如 何 调整 工作 流程 来 制作 响应 式 网 站 ， 可 参考 Stephen Hay 所 车 
Responsive Design Workflow 一 书 (http://responsivedesignworkflow.com) 。 


7.1. 策略 与 规划 
在 开始 考虑 如 何 设计 网 站 之 前 ， 你 需要 先 退 一 步 思考 下 网 站 的 目标 。 


除非 你 的 目标 并 不 是 创建 一 个 真正 的 网 站 ， 而 只 是 为 了 好 玩 或 练 下 手 ， 否 则 目标 首先 应 是 
解决 如 何 与 客户 沟通 以 及 如 何在 线 销售 产品 等 问题 。 


网 站 是 你 创建 出 来 解决 以 上 问题 的 工具 。 











你 应 该 从 一 开始 就 明了 网 站 或 项 目的 目标 是 什么 ， 不 管 这 个 目标 是 通过 你 自己 与 客户 或 利 
益 相 关 者 交流 得 来 的 ， 还 是 从 项 目 经 理 或 其 他 员工 传递 来 的 信息 中 获得 的 。 我 们 公司 需 
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要 一 个 网 站 ”这 并 不 是 一 个 目标 。 我 们 应 该 更 深入 地 挖掘 ， 去 发 现 哪些 群体 是 企业 试图 沟 
通 的 对 象 ， 以 及 哪些 目标 是 其 希望 网 站 能 达成 。 




















创建 一 个 网 站 ， 不 管 它 是 不 是 响应 式 的 ， 都 不 是 一 个 简单 的 过 程 。 在 创建 过 程 中 要 做 出 很 
多 的 创意 决策 ， 从 网 站 要 包含 的 内 容 ， 到 这 些 内 容 的 摆 放 位 置 ， 以 及 用 户 进入 网 站 的 路 
径 ， 等 等 。 如 果 你 明了 网 站 的 目标 所 在 ， 那 么 在 设计 过 程 中 你 将 做 出 更 好 的 决策 。 


p= 





























[小 贴 士 ] 

我 在 本 节 中 大 量 使 用 了 “客户 ”这 个 术语 ， 但 它 并 不 是 单单 指 雇用 设计 公司 创建 网 站 的 
AR. 

只 要 你 是 为 他 人 制作 网 站 ， 那 个 人 或 团体 就 是 你 的 客户 。 因 此 ， 如 果 你 是 公司 内 部 负责 
网 站 的 员工 ， 那 么 项 目的 利益 相关 者 也 将 被 视 为 你 的 客户 。 


7.1.1 用 户 研 究 
在 项 目 开始 的 时 候 ， 你 很 可 能 会 进行 用 户 研究 并 创建 人 物 角 色 、 情 景 以 及 其 他 在 网 站 设计 
过 程 中 起 指导 作用 的 资源 。 


在 很 大 程度 上 ， 这 些 工作 并 非 是 响应 式 设计 所 特有 的 ， 所 以 在 这 里 我 们 不 逐一 细 说 。 如 
果 你 想 对 此 有 更 深入 的 了 解 ， 有 很 多 非常 好 的 资源 ， 特 别 是 Dan Brown 的 著作 《高 效 设 
计 沟 通 之 道 ( 原 书 第 2 版 )》(Communicating Design: Developing Web Site Documentation for 
Design and Planning, Second Edition，http://communicatingdesign.com)， 它 将 告诉 你 如 何在 
网 页 设计 过 程 中 创建 所 需 的 文档 ， 比 如 人 物 角 色 、 流 程 图 、 线 框图 、 竞 争 性 分 析 和 可 用 性 
报告 。 

不 过 ， 一 个 特别 针对 响应 式 设计 的 警告 是 : 在 创建 人 物 角 色 时 ， 应 避免 将 其 与 设备 类 型 相 
对 应 。 你 不 是 为 “移动 用 户 ” 或 “桌面 用 户 ” 创 建 网 站 ， 你 是 为 每 个 可 能 在 不 同时 间 使 用 
不 同 设备 访问 网 站 的 用 户 创建 网 站 。 






































[ 小 贴 士 ] 

如 果 你 从 未 做 过 用 户 研究 ， 对 人 物 角 色 或 情景 这 些 术 语 一 无 所 知 ， 查 看 Usability.gov 上 的 
"What & Why of Usability" ( http://www.usability.gov/what-and-why/index.html ) 一 文 ， 尤 其 是 
用 户 研究 基础 及 术语 表 部 分 。 


7.1.2 ”内容 
无 论 什 么 网 站 ， 内 容 都 是 最 重要 的 部 分 。 在 设计 过 程 中 应 将 内 容 放 在 首要 位 置 ， 而 不 是 到 








A 
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最 后 才 设法 将 其 塞 人 到 已 完成 的 视觉 设计 中 。 


在 第 2 章 中 ， 我 们 讨论 了 如 何 为 网 站 制定 内 容 策略 以 及 在 启动 设计 流程 时 首先 进行 内 容 审 
计 。 我 们 也 谈 到 了 如 何 创建 能 在 所 有 尺寸 的 屏幕 上 都 有 良好 显示 效果 的 内 容 。 
1. 信息 架构 


一 旦 你 明确 了 网 站 需要 的 内 容 ， 下 一 步 就 是 对 内 容 进 行 组 织 和 标注 ， 以 及 构架 网 站 结构 。 
这 部 分 过 程 称 作 信息 架构 (IA, Information Architecture)。 

以 往 网 站 所 采用 的 通用 性 LA. 原则 仍 适 用 于 响应 式 网 站 ， 但 你 需要 确保 网 站 的 架构 在 小 屏 
幕 上 也 是 适用 的 ， 因 为 它们 可 能 没有 足够 的 空间 来 容纳 大 的 或 复杂 的 导航 。 

还 应 牢记 ， 网 站 架构 不 是 一 成 不 变 的 ，IA 及 设计 应 足够 灵活 以 能 适应 未 来 组 织 架构 或 项 目 
变化 的 需要 。 如 果 没 有 为 此 留 出 余地 ， 在 网 站 上 线 后 ， 你 终究 会 感到 添加 任何 新 的 内 容 都 
像 是 往 现 有 的 箱子 中 硬 塞 进 原本 不 在 其 中 的 东西 一 样 。 














[小 贴 士 ] 
RAAE ERARA? 请 查看 Martin Belam 发 表 于 The Guardian 上 的 “What is ‘Information 
Architecture?" 一文 (http//www.guardian.co.uk/help/insideguardian/2010/feb/02/what-is-information- 


architecture ), 


2. AFAM 
在 开始 组 织 需 要 出 现在 新 网 站 上 的 内 容 时 ， 首 先 应 该 创建 一 个 简化 的 内 容 区 域 高 级 大 纲 ， 
其 将 反映 在 网 站 的 主导 航 中 。 























例如 ， 图 7-1 是 Mule Design 公司 网 站 的 主导 航 截 图 。 


N 
gi 


图 下 面 是 一 个 简单 的 内 容 大 纲 。 





图 7-1: Mule Design 公司 网 站 上 的 主导 航 简单 明了 


。 Home (首页 ) 

。 About (Who We Are) (关于 我 们 ) 
o Individual Bio #1 (个 人 简介 1) 
o Individual Bio 42 (个 人 简介 2) 
o Etc. (其 他 ) 


。 Services (What We Do) (服务 ) 
* Portfolio (Our Work) (作品 集 ) 
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o Client 4&1 (客户 1) 
o Client 42 (客户 2) 
o Etc. (其 他 ) 





。 Blog (Our Blog) (博客 ) 
o Blog Entry #1 (博客 文章 1) 
o Blog Entry 42 (博客 文章 2) 
o Etc. (其 他 ) 














。 Contact (Hire Us) (联系 我 们 ) 


你 会 发 现在 许多 设计 公司 网 站 上 ， 项 层 的 内 容 区 域 基本 上 都 有 相同 的 项 : Home (首页 )、 
About (关于 )、Services (服务 )、Portfolio (作品 集 )、Blog (博客 ) 和 Contact (联系 
信息 )。 也 会 注意 到 网 站 上 的 文字 与 大 纲 中 的 不 同 :“Who We Are" (我们 是 谁 ) 取代 了 
“About”( 关 于 )。 





当 你 是 首次 创建 内 容 大 纲 时 ， 最 好 是 使 用 诸如 “关于 ”这 样 的 能 让 你 清楚 知道 此 处 应 放 入 
什么 内 容 的 通用 术语 ， 而 不 要 去 费 神 考虑 页 面 标题 或 导航 的 特定 措 词 。 否 则 你 会 过 于 关注 
诸如 术语 在 导航 中 是 否 合适 ， 是 否 有 近似 的 长 度 等 问题 。 


当 你 进一步 编辑 或 开发 网 站 内 容 时 ， 你 可 以 对 为 每 一 部 分 添加 更 多 的 细 方 。 


如 同 内 容 清 单一 样 ， 你 不 需要 列 出 每 个 单项 (比如 所 有 博客 文章 或 者 电 商 网 站 上 的 所 有 商 
品 )， 只 需 把 类 别 和 主要 内 容 项 写 下 来 即 可 。 


7.2 内容 先 于 布局 


在 完成 了 内 容 策略 的 制定 和 信息 架构 的 创建 之 后 ， 你 可 以 开始 考虑 内 容 如 何在 屏幕 上 编 
排 。 


内 容 是 一 个 网 站 最 重要 的 部 分 ， 所 以 你 必须 围绕 内 容 来 创建 设计 ， 而 不 是 以 相反 的 方式 。 


最 好 的 办 法 是 一 开始 创建 一 个 包含 所 有 内 容 的 无 样式 网 页 。 这 个 页 面包 括 的 所 有 页 面 组 件 
都 应 以 语义 化 HTML 代码 (比如 适当 标题 级 别 ) 标记 。 







































































这 项 工作 应 在 开始 绘制 草图 、 线 框图 或 原型 之 前 进行 ， 使 得 你 能 在 操心 内 容 的 显示 效果 之 
前 先 思考 每 块 内 容 在 页 面 上 所 扮演 的 角色 。 


























7.2.1 ARAH 


Hc. 我们 要 决定 哪些 内 容 组 件 会 出 现在 页 面 上 ， 比 如 网 站 Logo、 搜 索 框 、 主 导航 栏 、 正 
文 内 容 和 页 脚 。 
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在 本 阶段 的 设计 过 程 中 你 需要 把 这 些 组 件 作 为 单独 的 内 容 块 考虑 ， 这 样 在 创建 原型 时 你 就 








可 以 在 页 面 上 随意 移动 它们 的 位 置 。 
例如 ， 普 遍 认 为 网 页 的 “页 眉 ” 作 为 一 个 固定 单元 ， 应 包含 网 站 Logo、 搜 索 框 、 导 航 等 内 











容 项 。 但 是 你 需要 跳出 这 种 


在 页 眉 区 域 中 。 




















思维 框框 ， 在 设计 响应 式 网 站 时 并 不 是 所 有 这 些 项 目 都 必需 放 


我 们 可 以 包含 的 站 点 组 件 如 下 : 


* Logo 

。 搜索 框 

。 主导 航 

。 次 导航 

。 信息 链接 

。 版 权 声 明 

。 广告 

。 社交 媒体 链接 
。 登录 链接 








根据 页 面 的 类 型 ， 可 包含 的 页 面 组 件 如 下 : 




















。 标题 
。 主体 内 容 
。 次 要 内 容 
。 简介 
。 作者 
。 日 期 
。 引文 


7.2.0 ”以 文本 模式 进行 设计 


接 下 来 ， 把 所 有 需要 的 内 容 组 件 放 到 页 面 上 并 用 基本 的 结构 性 HTML 元 素 标记 它们 (我 们 





在 第 3 章 讲 过 如 何 做 到 这 一 ， 








点 )。 例 如 ， 在 图 7-2 和 图 7-3 中 ， 你 可 以 看 到 那 一 章 的 示例 网 

















页 在 添加 CSS 之 前 的 显示 效 


Zo 
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Pandas Forever 


* Home 
* About 
* Links 
* Contact 


Pandas in Wolong 


The Wolong National Nature Preserve, in the Sichuan Province of China, is home to more than 150 giant pandas. It's one of the key sites for panda breeding research, and 66 cubs have been born at 
Wolong since it was established in 1980. Pandas are an endangered species, with between 1500 and 3000 living in the wild, and less than 300 in captivity (research centers and 2005). 


Related Links 
* Pandas Unlimited 
* National Zoo Panda Cams 
* Panda Facts a WWF 

© 2014 Pandas Forever 











7-2: 我 们 的 网 站 未 应 用 CSS 时 在 桌面 显示 器 上 的 显示 效果 





eseeco Roaming 全 5:08 PM G 48% W 
clarissapeterson.com 


Pandas Forever 


Home 
About 
Contact 


Pandas in Wolong 


The Wolong National Nature Preserve, in the 
Sichuan Province of China, is home to more 
than 150 giant pandas. It's one of the key sites 
for panda breeding research, and 66 cubs have 
been born at Wolong since it was established in 
1980. Pandas are an endangered species, with 
between 1500 and 3000 living in the wild, and 
less than 300 in captivity (research centers and 
zoos). 





Related I inks 
7-3: 我 们 的 网 站 未 应 用 CSS 时 在 iPhone 上 的 显示 效果 


记 住 ， 对 一 个 响应 式 网 站 ， 首 要 的 设计 是 没有 设计 ， 也 就 是 说 ， 你 首先 创建 的 应 该 是 用 户 
在 其 浏览 器 或 设备 不 支持 CSS 和 JavaScript 时 所 看 到 的 设计 。 











仅 以 此 非常 基本 的 代码 ， 你 就 已 经 拥有 了 一 个 兼容 手机 (mobile-ready)、 响 应 式 和 可 访问 
的 功能 网 页 。 通 过 这 种 方式 进行 设计 ， 你 可 以 确保 网 页 对 所 有 用 户 都 是 可 用 的 。 


从 一 开始 就 使 页 面 对 于 每 个 人 都 是 可 访问 的 要 比 到 后 期 才 尝 试 为 此 添加 可 访问 性 和 兼容 性 
要 容易 得 多 。 
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7.2.8 线性 设计 
当 你 在 页 面 中 加 入 结构 化 文本 时 ， 你 其 实 就 是 在 创建 所 谓 的 线性 设计 。 


线性 设计 是 一 个 非常 简单 的 想法 。 想 想 人 们 从 头 到 尾 阅 读 网 页 上 的 所 有 内 容 ， 你 想 要 他 们 
按 什么 顺序 来 阅读 ， 你 的 HTML 代码 就 应 该 按 什么 顺序 编写 。 























这 个 要 求 看 起 来 再 基本 不 过 ， 但 传统 上 通常 是 先 做 视觉 设计 ， 然 后 编写 代码 以 适 配 设计 ， 
再 将 内 容 塞 和 空白 区 域 。 这 常常 会 导致 实际 的 HTML 代码 的 顺序 很 奇怪 。 

而 对 于 小 型 移动 设备 ， 所 有 内 容 基本 上 都 是 以 单列 形式 显示 ， 因 此 用 户 总 是 以 线性 顺序 来 
阅读 内 容 的 。 

开始 时 就 将 线性 设计 运用 于 无 样式 文本 ， 这 样 你 就 使 其 一 开始 就 能 在 小 屏幕 上 工作 ， 同 时 
也 能 在 无 法 显示 你 的 样式 的 浏览 器 中 工作 。 











7.2.4 内 容 层 次 

在 这 个 时 候 你 需要 做 出 某 些 决定 ， 哪 些 内 容 部 分 是 最 重要 的 ? 

最 重要 的 内 容 应 该 首先 出 现在 页 面 上 上。 想象 基 人 从 上 至 下 阅读 你 的 页 面 。 在 页 面 顶部 ， 你 
很 可 能 会 有 网 站 标题 和 (或) 网 站 Logo， 这 样 当 用 户 到 达 页 面 时 ， 就 能 知道 他 们 所 在 的 位 
置 。 页 面 标题 也 应 放 在 靠近 顶部 的 位 置 ， 以 使 用 户 能 知道 页 面 是 关于 什么 内 容 的 。 
























































记 住 此 时 你 并 不 是 在 做 最 终 的 设计 决策 ， 所 以 不 必 执 着 于 一 切 都 丝毫 不 差 ， 你 可 以 在 之 后 
随时 做 出 更 改 。 
在 这 个 时 候 ， 你 也 应 避免 从 布局 角度 去 萎 虑 内 容 ， 因 为 在 响应 式 设计 中 内 容 不 会 总 是 在 固 
定 的 地 方 。 你 可 能 习惯 于 把 某 些 元 素 放 在 侧 边栏 中 ， 但 某 些 屏 幕 尺 寸 可 能 没有 空间 容纳 侧 
边栏 ， 所 以 这 些 元 素 就 不 得 不 置 于 主要 内 容 之 上 或 之 下 。 把 你 主要 的 精力 放 在 考虑 内 容 的 
层次 结构 上 。 


7.3 考虑 布局 


一 旦 你 知道 每 个 页 面 将 包含 什么 内 容 ， 你 就 可 以 开始 规划 每 个 页 面 将 是 什么 样子 。 你 需要 
思考 页 面 设计 在 不 同 尺 寸 屏 幕 上 会 是 怎样 的 显示 效果 。 


在 转向 正式 的 线 框图 或 原型 之 前 ， 最 好 先 绘制 草 















































WRI 








7.3.4 草图 绘制 
在 Stephen Hay 的 《响应 式 Web 设计 全 流程 解析 》 (http://responsivedesignworkflow.com) 
一 书 中 ， 把 草图 绘制 称 为 “平面 上 的 思考 "。 你 可 以 画 只 有 少量 细节 的 小 草图 ， 快 速 尝试 
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多 种 想法 。 之 后 ， 当 想法 更 具体 化 时 ， 可 以 转 而 绘制 更 详细 的 草图 。 
草图 的 绘制 从 思考 网 站 在 各 种 尺寸 的 屏幕 上 (从 小 手机 至 大 屏 显示 器 ) 将 如 何 显示 开始 。 
不 要 担心 自己 是 否 会 “ 画 ”， 只 需 画 简单 的 图 形 和 线条 即 可 ， 即 使 线条 牌 斜 也 没有 关系 。 




















记 下 什么 有 用 和 什么 疫 用 ， 这 样 你 可 以 把 这 些 想法 融入 到 之 后 的 设计 。 你 的 初步 草图 并 不 会 
交付 给 客户 ， 它 们 只 是 一 个 设计 工具 。 你 可 以 决定 是 否 与 团队 成 员 共 享 最 有 帮助 价值 的 草图 。 


想 一 想 各 种 不 同 的 屏幕 尺寸 ， 手 机 、 小 平板 、 大 平板 ， 等 等 ， 画 出 与 它们 大 小 近似 的 珑 
形 ， 然 后 在 里 面 画 你 的 布局 想法 。 并 不 需要 用 尺子 去 量 和 矩形， 你 并 不 是 去 针对 特定 的 设备 
设计 断 点 ， 你 只 需 着 眼 于 常见 的 设备 类 别 。 
































既 可 以 在 纸 上 画 草图 ， 也 可 以 用 触 控 笔直 接 在 设备 上 画 ， 而 且 你 会 发 现 这 比 去 想象 一 个 设 
备 屏 幕 要 更 方便 ， 如 图 7-4 所 示 。Paper (http//www.fiftythree.com/paper) 是 一 个 很 好 的 绘 
制 草图 的 iPad 应 用 。 














& 7-4: 可 以 用 触 控 笔 直接 在 设备 屏幕 上 画 初步 草图 ( 图片 来 源 : Baldiri, http://www.flickr.com/ 
photos/baldiri/5734993652) 


7.3.2 ”从 小 屏幕 开始 
不 管 你 是 从 草图 还 是 从 原型 开始 ， 最 好 都 是 遵循 小 屏幕 优先 的 原则 。 设 计 应 先 从 最 小 的 屏 
幕 尺 寸 开始 ， 然 后 直至 最 宽 的 屏幕 尺寸 。 我 们 将 在 第 8 章 中 讨论 如 何 确 定 你 应 该 为 之 设计 
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的 屏幕 尺寸 范围 ， 但 通常 最 小 的 屏幕 尺寸 会 是 手机 尺寸 的 屏幕 。 





为 什么 不 是 从 大 到 小 呢 ? 毕 竞 ， 桌面 尺寸 的 设计 将 包含 更 多 的 细节 ， 按 从 大 到 小 的 方式 来 
处 理 不 是 更 容易 吗 ? 









































事实 上 ， 人 恰恰 相反 。 我 喜欢 用 这 个 比喻 来 说 明 此 道理 : 想象 你 住 在 一 套 公 寓 中 ， 你 有 机 会 
搬入 一 个 更 大 的 房子 ， 那 里 会 有 足够 的 空间 存放 你 的 家 具 和 物品 ， 甚 至 还 能 在 墙 上 再 挂 一 
些 图 片 或 其 他 饰品 。 


然后 再 想象 一 下 从 大 房子 搬 到 小 公寓 中 ， 所 有 东西 都 堆 挤 在 一 起 ， 箱 子 靠 墙 堆放 着 ， 因 为 
没 地 方 打 开 它 们 ， 即 使 这 样 你 还 不 得 不 丢掉 一 半 的 家 具 。 


设想 一 下 类 似 的 场景 发 生 于 网 站 ， 你 会 发 现 试图 将 桌面 尺寸 屏幕 上 的 所 有 内 容 都 搬 到 小 屏 
幕 上 也 是 非常 困难 的 。 


而 从 小 屏幕 开始 要 容易 人 手 得 多 ， 因 为 在 小 屏幕 上 你 最 终 只 会 使 用 确实 能 融入 到 设计 中 的 
内 容 ， 它 将 迫使 你 更 注重 内 容 ， 什 么 内 容 是 真正 需要 的 ， 而 不 是 因为 反正 有 空间 就 把 一 切 
都 随意 堆放 在 那里 。 


同样 的 如 果 你 住 在 一 个 小 公寓 里 : 你 没有 多 余 的 空间 ， 但 你 设法 以 某 种 方式 把 需要 的 一 切 
都 放 进去 。 如 果 你 住 在 一 个 更 大 的 房子 中 ， 有 很 多 的 房间 ， 你 往往 会 堆积 大 量 并 不 真正 需 
要 且 从 未 用 过 的 物品 。 


不 过 ， 有 时 候 从 桌面 尺寸 屏幕 开始 你 的 设计 可 能 会 是 一 个 更 好 的 选择 ， 比 如 当 你 对 一 个 现 有 
的 网 站 进行 重新 设计 时 ， 你 必须 使 用 现 有 的 固定 宽度 设计 作为 响应 式 设 计 的 一 部 分 。 如 果 你 
已 经 有 了 一 个 桌面 尺寸 的 设计 ， 且 它 需要 继续 保持 原样 ， 以 原 设计 为 起 点 可 能 会 更 有 效 。 


你 也 要 谴 记 ， 首 先 从 小 屏幕 开始 设计 并 不 意味 着 在 设计 的 过 程 中 就 不 苍 虑 大 屏幕 。 有 时 在 
大 小 屏幕 间 来 回 切 换 很 有 帮助 ， 至 少 在 初始 阶段 是 这 样 的 。 


7.39.3 移动 优先 
你 大 概 听 过 “移动 优先 ”(mobile first) 这 个 词 ， 可 能 想 知 道 它 跟 “ 小 屏幕 优先 ”(small- 
screen first) 是 不 是 一 个 意思 ， 虽 然 这 两 个 概念 有 些 重 又 ， 但 它们 并 非 完 全 相同 。 












































































































































“移动 优先 “是 由 Luke Wroblewski 在 其 Mobile First 一 书 (http://www.abookapart.com/ 
products/mobile-first， 中 文 版 参见 《移动 优先 与 响应 式 Web 设计 》) 中 提出 的 术语 ， 这 是 一 
种 创建 网 站 及 网 页 应 用 程序 的 方法 ， 所 做 的 设计 优先 考虑 使 用 移动 设备 的 用 户 ， 以 及 这 些 
用 户 与 网 站 的 交互 方式 。 它 要 求 你 首先 考虑 移动 设备 的 局 限 性 及 能 力 。“ 优 先 ” 这 个 词 在 
此 处 意味 着 在 设计 考量 中 移动 设备 比 非 移 动 设备 要 更 重要 。 


保证 你 的 网 站 能 在 触摸 屏 上 良好 工作 是 很 重要 的 ， 我 们 会 在 第 8 章 中 讨论 设备 ， 并 解决 触 
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摸 目标 大 小 等 相关 问题 。 但 当 你 设计 一 个 响应 式 网 站 时 ， 对 于 设备 应 有 最 大 的 灵活 性 ， 你 
旨 在 设计 一 个 设备 无 关 的 网 站 ， 能 在 任何 类 型 的 设备 上 都 良好 地 工作 。 

















在 移动 和 非 移动 设备 之 间 不 再 有 明显 的 分 界线 。 你 可 以 买 一 台 具 有 触摸 屏 的 台式 电脑 。 你 
可 以 把 显示 器 和 键盘 与 手机 连接 ， 把 它 当 “电脑 ”用 ， 界 线 只 会 越 来 越 模糊 。 























所 以 当 我 在 本 书 中 使 用 “小 屏幕 优先 ”这 个 短语 时 ， 我 仅 是 指 设计 响应 式 布 局 和 设计 网 站 
的 过 程 。 我 用 “优先 ”这 个 词 并 不 是 说 小 屏幕 更 重要 ， 而 是 说 从 时 间 顺 序 角度 来 讲 ， 为 小 
屏幕 做 设计 将 先 于 为 大 屏幕 做 设计 。 


所 有 的 屏幕 尺寸 都 是 同等 重要 的 ， 虽 然 是 从 最 小 的 屏幕 开始 ， 但 最 终 可 能 会 在 设计 宽屏 幕 
的 显示 效果 上 花费 更 多 的 时 间 。 


7.4 原型 


在 对 布局 有 了 大 致 的 想法 后 ， 就 可 以 开始 创建 布局 了 。 


























7.4.1 线 框图 与 原型 


在 开始 进行 视觉 设计 之 前 ， 你 需要 有 一 个 好 的 站 点 布局 骨架 ， 并 知道 它 将 如 何 运 作 以 及 内 
容 如 何在 屏幕 上 放置 。 


有 两 种 不 同 的 方式 来 构想 网 站 布局 。 传 统 上 ， 网 页 设计 采用 的 是 线 框 图 (wireframe) 7j 
式 ， 也 就 是 显示 页 面 布局 的 静态 草图 。 


但 对 于 响应 式 设 计 ， 你 的 设计 不 是 固定 不 变 的 ， 会 随 屏 幕 宽度 而 变化 。 因 此 ， 使 用 响应 式 
原型 (responsive prototype) 变 得 越 来 越 普遍 ， 其 基本 上 是 内 置 响应 式 HTML 的 线 框图 。 
可 以 用 它们 来 查看 在 各 种 屏幕 上 设计 是 如 何 随 视 口 宽度 变换 而 变化 的 。 
































7.4.2” 线 框图 
传统 上 ， 网 页 设计 过 程 到 了 这 一 步 应 该 是 创建 线 框图 。 











网 站 线 框图 是 页 面 所 包含 的 各 个 组 件 将 如 何 放 置 的 模型 。 图 7-5 显示 的 是 一 个 线 框图 例子 ， 
网 页 上 的 事物 都 是 以 一 般 轮 廓 表示 ， 特 意 省 略 掉 了 视觉 细节 (其 将 在 后 面 予 以 补充 )。 


对 于 固定 宽度 网 站 ， 线 框图 列 出 了 不 同 页 面 组 件 (标题 、 导 航 、 搜 索 框 、 列 ， 等 等 ) 的 确 
切 位 置 。 












































但 对 于 响应 式 网 站 ， 每 个 组 件 的 位 置 并 不 是 国定 的 ， 布 局 会 随 视 口 宽度 而 变化 。 所 以 ， 你 
可 能 会 发 现 与 其 创建 一 个 并 不 能 真正 代表 响应 式 网 站 的 线 框图 ， 创 建 响应 式 原 型 《有 时 也 
叫 响 应 式 线 框图 ) 会 更 有 效 。 
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7.4.3 ”响应 式 原型 
原型 (这 个 术语 也 被 用 于 工业 设计 等 领域 ) 是 一 个 模型 ， 不 仅 能 够 演示 某 个 事物 看 上 去 会 
是 怎样 的 ， 也 能 演示 其 将 如 何 工 作 。 


原型 不 一 定 是 以 与 最 终 产 品 相同 的 方式 制作 出 来 的 。 例 如 ， 当 一 辆 新 型 号 的 汽车 被 设计 出 
来 后 ， 通 常会 制作 出 一 个 原型 并 送 去 参加 车 展 ， 以 便 能 在 决定 该 车 型 是 否 投 产 之 前 先 获取 
消费 者 的 反馈 。 这 些 汽车 原型 是 在 研究 室 中 单独 制造 出 来 的 ， 而 不 是 由 通常 的 工厂 组 装 线 
生产 ， 它 们 甚至 可 能 无 法 驱动 。 


同样 的 ， 你 的 响应 式 原 型 不 需要 用 像 真实 网 站 那样 的 编码 方式 来 进行 编码 ， 交 互 元 素 也 并 不 
需要 能 工作 。 你 可 以 使 用 HTML 或 者 原型 软件 (我们 一 会 就 将 介绍 儿 个 ) 来 构建 一 个 原型 。 















































图 7-5: 一 个 固定 宽度 网 站 的 详细 线 框图 (图 片 提供 者 : After Victory, http://www.flickr.com/photos/ 
aftervictory/5097418313/) 


响应 式 原型 是 一 个 “真正 的 ”网 页 ， 你 可 以 在 浏览 器 中 查看 它 ， 但 它 只 有 基本 的 布局 ， 显 
示 效 果 与 线 框图 类 似 。 事 实 上 ， 它 在 本 质 上 与 线 框图 是 同一 事物 ， 区 别 在 于 ， 布 局 是 响应 
式 的 ， 所 以 你 可 以 调整 浏览 器 窗口 或 是 在 不 同 的 设备 上 查看 原型 来 观察 布局 是 如 何 变化 的 。 


原型 的 保 真 度 并 无 限制 从 只 有 很 少 的 细节 到 极 接近 实际 的 最 终 产 品 都 行 。 汽 车 原型 可 能 
看 起 来 像 一 辆 真正 的 汽车 ， 但 也 仅 用 于 视觉 展示 ， 甚 缺少 引擎 和 其 他 的 必要 元 件 。 或 者 它 
可 能 是 一 辆 能 开 的 车 ， 但 只 能 低速 行驶 用 以 演示 ， 缺 乏 在 公路 上 行驶 的 安全 特性 。 
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同样 的 事情 也 适用 于 网 站 原型 。 一 般 来 说 , 在 设计 的 早期 阶段 ， 你 将 以 低 保 真 原型 开始 ， 
然后 随 着 设计 的 推进 ， 原 型 将 变 得 越 来 越 真实 。 











7.4.4 原型 中 有 什么 


原型 应 该 展示 布局 的 基本 要 素 ， 以 及 站 点 布局 如 何 响应 视 口 宽度 的 变化 。 





虽然 在 开始 进行 视觉 设计 工作 之 后 ， 你 仍 可 继续 修改 布局 ， 但 在 只 关注 布局 的 现 阶 段 ， 对 
大 量 的 布局 做 出 合适 的 决策 显然 更 为 容易 。 


虽然 你 可 能 会 有 几 个 不 同类 型 页 面 的 原型 (如 首页 、 内 页 ) ， 但 不 要 试图 链接 它们 ， 尽 管 
这 样 你 可 以 通过 点 击 从 一 个 原型 跳 转 到 另 一 个 原型 ， 就 如 同 它们 是 实际 的 网 站 页 面 一 样 。 
你 现在 应 该 只 专注 于 布局 ， 链 接 网 页 只 会 增加 复杂 性 。 在 稍 后 的 设计 过 程 中 你 可 能 要 制作 
交互 原型 (interactive prototype)， 其 可 以 被 用 来 测试 网 站 的 实际 功能 (比如 结账 过 程 )， 但 
现在 你 的 原型 应 该 只 是 视觉 原型 而 非 互动 原型 。 
























































7.4.5 “从 基础 开始 
你 创建 的 第 一 个 响应 式 原 型 只 是 给 出 了 关于 页 面 上 内 容 的 放置 及 各 种 视 口 宽度 下 内 容 的 层 
次 结构 的 粗略 想法 。 最 终 ， 你 会 转 到 高 保 真 原型 上 来 。 


你 不 需要 在 这 里 考虑 诸如 字体 或 颜色 等 细节 ， 只 需 邦 虑 布局 。 选 择 一 种 简单 的 无 衬 线 字体 
用 于 所 有 内 容 ， 并 用 边框 和 不 同 的 灰 阶 来 区 分 页 面 上 的 各 个 内 容 项 ， 这 将 有 助 于 你 专注 布 
局 。 如 果 你 使 响应 式 原型 看 上 去 太 和 逼真， 客户 可 能 会 把 它 当成 是 “真正 的 ”网 站 。 


如 有 果 在 制作 响应 式 原型 时 ， 从 一 开始 就 在 各 种 不 同 的 设备 上 测试 它们 ， 那 么 所 有 问题 都 能 
在 早期 得 到 处 理 。 






























































当 以 低 保 真 度 原型 开始 时 ， 你 既 可 以 使 用 占 位 符 代 赫 内 容 ， 也 可 以 使 用 实际 内 容 。 使 用 实 
际 内 容 的 好 处 是 你 可 以 知道 它 在 布局 中 是 否 合适 。 例 如 ， 如 果 在 页 面 顶 部 放置 标题 的 地 方 
以 “页 面 标题 示例 ”做 为 占 位 符 ， 虽 然 它 看 起 来 是 完美 匹配 布局 的 ， 但 当 你 后 来 必须 插入 
一 个 实际 有 10 个 字 而 不 是 6 个 字 的 页 面 标题 时 ， 就 可 能 变 得 不 再 适合 了 。 


同 理 ， 当 创建 原型 时 ， 不 要 只 考虑 理想 化 的 页 面 会 是 怎样 的 显示 效果 。 你 应 该 确保 你 的 原 
型 可 以 应 对 极端 情况 一 一 网 站 中 最 复杂 的 页 面 。 






























































7.4.6 ”创建 页 面 布 局 
当 开始 考虑 网 站 的 实际 页 面 时 ， 你 必须 决定 哪些 页 面 或 页 面 类 别 需 要 创建 布局 。 


由 于 设计 中 的 某 些 部 分 在 大 多 数 页 面 或 者 是 所 有 页 面 上 比如 页 眉 和 导航 很 可 能 在 所 有 页 
看 上 都 是 一 样 的 ) 看 起 来 都 是 一 样 的 ， 你 只 需要 为 几 种 类 型 的 页 面 创建 布局 。 
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VERUS AVEECKIROTAS T ARE ER 





例如 ， 对 于 一 个 报纸 网 站 ， 可 能 会 有 的 页 T 











你 都 有 哪些 页 面 类 型 。 
有 类 型 包括 : 





























页 面 ， 包 含 的 主要 是 图 片 而 不 是 文本 ，; 











。 信息 页 ， 比如 “隐私 保护 ”。 


你 可 以 在 图 7-6 中 的 华盛顿 邮 报 网 站 看 到 以 上 这 些 种 类 的 页 面 布 局 。 
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& 7-6. 用 在 《 华 





— 网 站 上 的 6 种 页 面 布 局 
有 些 元 素 在 所 有 的 页 面 上 都 将 始终 是 一 致 的 。 例 如 ， 网 站 上 的 每 








每 个 页 面 在 其 顶部 可 能 都 会 








有 相同 的 页 眉 、 导 航 栏 和 搜索 框 ， 尽 管 不 是 必须 这 么 做 。 在 图 7-6 中 ， 除 首页 外 (其 在 导 
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思考 每 个 页 面 可 以 如 何 被 分 解 成 不 同 的 组 件 
其 他 页 面 的 独立 内 容 块 。 






































有 些 页 面 类 型 与 其 他 类 型 非常 类 似 。 例 如 ， 刚 刚 描述 过 的 文章 页 夯 
因为 它们 主要 包含 的 都 是 文本 。 但 是 文章 页 面 需要 有 地 方 放置 作者 和 日 期 等 元 数 











常 相 似 ， 
据 ， 而 信息 页 面 则 不 需要 。 











这 些 组 件 是 可 在 页 

















航 栏 堪 侧 省 略 了 “华盛顿 邮 报 ”的 Logo) ， 所 有 类 型 的 页 面 上 导航 栏 都 是 相同 的 。 
看 上 被 自由 移动 或 复制 到 




















在 设计 过 程 中 你 会 为 每 种 不 同 的 页 面 类 型 制作 一 个 或 多 个 布局 。 通 常 ， 一 个 网 站 会 有 2 至 


5 种 页 面 类 型 。 











这 些 布局 应 该 是 最 复杂 的 布局 ， 因 为 较 简 单 的 布局 往往 可 以 从 它们 之 中 派 


生出 来 。 例 如 ， 你 并 不 需要 为 信息 页 面 单独 创建 一 个 原型 ， 因 为 它 只 不 过 是 去 除了 某 些 组 


件 后 的 文章 页 面 。 





先 做 首页 是 很 有 吸引 力 的 ， 因 为 它 就 像 是 网 站 的 “脸面 "。 但 从 最 简单 的 内 页 开始 ， 在 内 

















页 都 有 了 确定 的 布局 后 再 转向 更 复杂 的 主页 往往 会 更 容易 。 


7.4.7 框架 
要 加 快 原型 设计 的 过 程 ， 





你 可 以 使 用 框架 (framework), fi 


E 架 是 一 个 可 1 








FÁJ HTML 和 


CSS 包 ， 包 含 了 创建 一 个 基本 网 站 需要 的 所 有 元 素 。 通 过 框架 你 可 以 在 一 两 个 小 时 内 就 创 
































建 出 一 个 响应 式 HTML 原型 ， 而 不 必 从 零 开 始 。 框 架 也 可 以 作为 实际 网 站 的 基础 代码 。 


对 于 一 个 框架 ， 其 包含 的 CSS 将 为 HTML 元 素 添 加 基本 的 样式 。 因 此 ， 从 一 开始 ， 你 的 





段落 、 标 题 、 列 表 、 按 钮 和 表单 字段 都 有 一 个 虽然 基础 ， 但 看 起 来 还 不 错 的 外 观 ， 你 不 必 








再 为 它们 去 写 CSS 样式 。 框 架 
HIE (包括 列 和 导航 ) 添加 响应 式 布 局 能 力 。 























即使 你 只 有 HTML 和 CSS 的 基本 知识 ， 也 能 够 很 容易 地 使 用 
原型 (如 图 7-7 所 示 )。 当 创建 一 个 实际 的 网 站 时 ， 使 用 
如 何 工 作 的 了 。 但 在 原型 设计 阶段 ， 基 意味 着 设计 团队 成 员 将 能 够 
HTML 原型 ， 他 们 无 需 拥 有 开发 人 员 那 样 的 专业 技巧 ， 自 己 就 能 使 用 机 
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ad] 





[ad] 


Fostereg. 





*- 





还 包含 有 说 明文 档 指导 你 如 何 使 用 它 提供 的 CSS 类 来 为 页 


医 架 快速 地 创建 一 个 响应 式 
E 架 并 不 是 说 就 不 用 知道 代码 是 
自行 创建 或 使 用 响应 式 
E 架 和 修改 代码 。 





7-7: 这 些 原型 示例 都 是 用 Foundation 响应 式 框架 创建 的 
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由 ZURB 开发 的 Foundation (http://foundation.zurb.com) 框架 ， 如 你 在 原型 示例 中 所 见 到 
的 ， 是 一 个 极 佳 的 制作 响应 式 原 型 的 工具 。 它 包含 一 个 小 屏幕 优先 的 具有 语义 化 标记 的 12 
列 弹性 网 格 。Bootstrap (http://getbootstrap.com) 是 另 一 种 常用 的 框架 。 你 也 可 以 在 网 上 搜 
索 “ 响 应 式 框架 ” (responsive framework) ， 能 找到 数 十 种 其 他 选择 。 它 们 具有 很 大 的 差异 ， 
所 以 你 应 该 逐一 测试 以 找 出 最 适合 你 需要 的 框架 。 








7.4.8 原型 创建 工具 
如 果 你 不 想 用 HTML 来 创建 原型 ， 有 几 个 工具 〈 包 括 桌面 应 用 和 在 线 应 用 ) 可 以 用 来 创建 
响应 式 原型 

















不 过 ， 在 大 多 数 情况 下 ， 这 些 工 具 并 不 能 创建 真正 的 可 以 在 任意 屏幕 尺寸 下 查看 的 响应 式 
原型 。 相 反 ， 它 们 只 是 能 让 你 基于 不 同 的 屏幕 尺寸 创建 数 个 不 同 的 静态 线 框图 。 

















下 面 是 一 些 响 应 式 原型 设计 工具 : 


* Balsamiq (http//balsamiq.com/) ; 
e Froont (http://www.froont.com/ ); 





e  HotGloo (http://www.hotgloo.com/responsive-prototype-tool), ， 如 图 7-8 所 示 。 


3. 
m 


TEST DRIVE TODAY 











7-8: HotGloo 在 线 原型 创建 工具 


你 还 可 查看 Balsamiq 的 文章 “Responsive Design with Mockups” (http:;//support.balsamiq.com/ 
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customer/portal/articles/615901-responsive-design-with-mockups) 以 获得 一 些 入 门 的 技巧 。 


* mu, t * 
7.5 视觉 设计 
原型 创建 好 后 ， 接 下 来 是 进行 网 站 的 视觉 设计 。 在 这 一 阶段 我 们 添加 颜色 、 文 字 排 版 样式 
及 品牌 元 素 。 响 应 式 网 站 相对 固定 宽度 网 站 又 会 有 些 不 同 。 





























传统 上 ， 视 觉 设计 是 以 一 个 或 多 个 Photoshop 设计 样稿 (网 站 显示 效果 的 平面 视觉 表现 ) 
的 形式 提供 给 客户 或 者 利益 相关 者 ， 来 展示 网 站 首页 及 内 页 。 但 是 ， 对 于 一 个 响应 式 网 
站 ， 你 不 应 仅 以 一 个 静态 页 面 视 图 来 展示 它们 。 
































最 好 在 设计 早期 就 让 客户 参与 ， 向 他 们 展示 响应 式 原型 。 这 将 有 助 于 确保 他 们 在 整个 过 程 
中 对 响应 式 网 站 有 一 个 清晰 的 认识 。 而 当 你 推进 到 视觉 设计 部 分 时 ， 除 了 Photoshop 设计 
样稿 外 ， 还 有 其 他 一 些 方式 可 用 来 呈现 视觉 设计 元 素 。 


7.5.1 样式 板 
如 果 不 打 算 向 客户 展示 一 个 像素 级 精确 的 设计 样稿 (响应 式 网 站 无 需 像素 级 精度 ) ， 那 怎么 
做 才能 缩小 原型 与 完全 设计 好 的 网 站 之 间 的 差距 呢 ? 我 们 可 以 从 样式 板 (style tiles) 开始 。 























设计 师 Samantha Warren 想 出 了 样式 板 (http://styletil.es) 这 一 概念 ， 样 式 板 是 由 字体 、 颜 
色 和 界面 元 素 组 成 的 能 传达 网 站 视觉 品牌 精髓 的 可 交付 设计 成 果 。 
Warren 解释 说 ， 制 作 样 式 板 类 似 于 室内 设计 师 设计 房间 装修 方案 的 过 程 。 室 内 设计 师 并 不 
会 立即 拿 出 三 种 不 同 的 房间 设计 方案 给 客户 ， 而 是 首先 会 与 客户 一 起 讨论 来 决定 房间 装修 
设计 所 使 用 的 颜色 、 纹 理 和 材料 ， 然 后 再 基于 这 些 选 项 进行 设计 。 


样式 板 例子 如 图 7-9 所 示 。 
























































使 用 样式 板 可 以 帮助 你 在 交付 一 个 完整 设计 之 前 拟订 出 核心 设计 元 素 。 

创建 样式 板 从 倾听 客户 需求 并 向 他 们 提出 问题 开始 ， 这 些 你 通常 在 需求 收集 阶段 做 的 事 
情 。 特 别 是 试 着 去 了 解 用 户 的 想法 ， 他 们 希望 从 网 站 获得 怎样 的 视觉 观感 。 此 外 ， 务 必 明 
确 是 否 需 要 遵循 现 有 的 品牌 或 风格 指南 。 





pun 








在 创建 样式 板 时 ， 你 既 可 以 使 用 像 Photoshop 这 样 的 图 像 编 辑 工具 ， 也 可 直接 在 浏览 器 
中 工作 。 无 论 哪 种 方式 ， 你 都 可 按 需 要 尽 可 能 多 地 生成 不 同样 式 组 合 以 与 客户 达成 共识 。 
现在 重 做 样式 要 比 之 后 容易 得 多 。 当 然 在 后 期 你 也 还 是 可 以 改变 样式 的 ， 因 为 有 时 在 看 
到 样式 在 实际 的 网 站 设计 上 的 显示 效果 之 前 ， 你 并 不 一 定 能 完全 明白 设计 决策 所 带 来 的 
影响 。 
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图 7-9; Examiner 网 站 (第 四 幅 图 ) 的 最 终 设计 基于 左边 三 
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访问 Style Tiles 网 站 (http://styletil.es ) 以 更 多 
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7.5.2 ”测试 与 调整 
响应 式 网 页 的 设计 过 程 需要 随 着 进度 持 纪 








作 于 某 个 特定 的 屏幕 尺寸 ， 你 最 好 是 能 





pa 


才 试 图 再 去 调整 
我 们 将 在 第 











幅 图 中 的 样式 板 


地 了 解 样式 板 ， 你 还 可 下 载 一 个 免费 的 


卖 不 断 地 测试 。 只 要 你 有 了 HTML 原型 ， 你 就 应 该 


在 不 同 的 设备 上 测试 它 以 查看 显示 效果 。 如 果 一 个 布局 在 理论 上 似乎 不 错 ， 但 最 终 无 法 工 





在 早期 发 现 这 样 的 问题 ， 而 不 是 在 网 站 快要 完工 时 





8 章 中 更 深入 地 探讨 如 何 进行 测试 。 
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7.5.3 ”风格 指南 
风格 指南 (style guide) 收集 和 记录 对 网 站 所 做 出 的 所 有 设计 决策 。 用 哪些 字体 ， 用 在 哪 
里 ? 正确 的 字体 大 小 是 什么 ”按钮 看 起 来 是 什么 样子 ? 


根据 项 目的 需要 ， 风 格 指南 可 简 可 繁 。 它 有 两 个 用 途 。 首 先 ， T qno 
过 程 中 确保 设计 的 一 致 性 。 如 果 提 交 按 钮 应 该 总 是 蓝 色 的 ， 一 个 表单 会 出 现 一 个 绿色 
的 提交 按钮 ? 


矛盾 的 发 生 有 时 是 因为 我 们 没有 广 意 到 代码 中 的 错误 ， 有 时 则 是 因为 没有 人 意识 到 针对 一 
个 特定 页 面 做 出 的 设计 决策 已 经 影响 到 整个 网 站 。 如 果 整 个 网 站 具有 一 致 的 视觉 体验 ， 那 
无 疑 会 给 人 更 好 的 感觉 。 


风格 指南 的 第 二 个 用 途 是 能 够 帮助 网 站 未 来 的 管理 人 员 做 出 设计 决策 ， 这 将 有 助 于 维护 网 
站 设计 的 一 致 性 ， 因 为 管理 人 员 会 随 着 时 间 而 发 生变 化 。 设 计 网 站 的 人 可 能 都 熟知 哪 种 字 
体 用 在 哪里 以 及 为 什么 用 在 那里 ， 但 是 当 客 户 内 部 负责 网 站 维护 的 员工 在 后 期 需要 添加 一 
个 新 特性 时 ， 如 果 疫 有 风格 指南 的 指引 ， 他 们 很 难 知道 应 该 使 用 何 种 字体 。 


风格 指南 在 印刷 设计 领域 已 使 用 多 年 ， 有 时 也 称 作 风格 手册 或 品牌 指导 和 手册。 通常 ， 公 司 
将 有 一 个 通用 的 风格 手册 来 说 明 品 牌 Logo 的 使 用 等 事项 。 一 个 网 站 的 风格 指南 应 以 此 基 
础 并 更 加 的 细 化 。 


除了 列 出 设计 元 素 字体、 颜色 等 ) 之 外 ， 展 示 它 们 的 实际 效果 也 是 有 帮助 的 ， 如 图 7-10 
所 示 ， 这 样 能 很 容易 地 一 看 就 知道 它们 看 起 来 是 什么 样子 。 你 也 可 以 指定 特定 的 CSS 来 创 
建 特殊 的 效果 。 


风格 指南 并 不 是 只 能 包含 视觉 风格 ， 它 还 可 以 包含 内 容 风 格 和 编码 标准 (或 其 他 可 放 在 不 
同 风格 指南 中 的 规范 ) 。 


尽管 在 Word 或 其 他 文字 编辑 软件 中 以 文档 方式 来 创建 风格 指南 十 分 普遍 ， 但 往往 用 
HTML 来 创建 它 要 容易 些 ， 这 人 允许 你 更 准确 地 展示 设计 风格 在 屏幕 上 的 显示 效果 。 耕 则 ， 
你 可 能 要 包含 示例 截图 。 


下 面 是 你 可 能 希望 包含 在 风格 指南 中 的 内 容 的 一 些 例子 : 


。 文字 排版 ; 

。 颜色 和 纹理 ; 

。 布局 系统 /网 格 ; 

。 HTML 元 素 (诸如 列表 项 、 表 单元 素 或 块 引 用 ) 样式 ，; 
。 适当 的 标记 («his 是 用 于 网 站 标题 还 是 页 面 标题 呢 ) ， 
。 Logo 用 法 ; 




















































































































* 语音 ; 
。 常规 风格 ， 比 如 标点 符号 与 词语 用 法 ， 如 果 你 不 是 使 用 如 The AP Stylebook( 美 联 社 写 
作风 格 ) 或 The Chicago Manual of Style (芝加哥 格式 手册 ) 这 样 的 商业 风格 指南 。 





Colors 


Colors are used to color code sections, define lower level content and direct attention to 
important content. 


Primary Colors 


Dark Blue Light Blue Lime Green 
Background Used for Used for 
colors used in smaller body download 
the masthead copy, used in buttons and 


$0678BE the masthead to indicate 
#53BOEB customization 
#96BC44 
Secondary Colors 






Navy Blue Pale Gray 
Background Background 
color used in Background color used in 
the top color used in the footer, 
navigation the lower advertising 
$064771 navigation and to 
#0D7DC1 highlight 
important 
information. 
#F6F6F2 


& 7-10: Drupal.org 风格 指南 中 的 一 页 列 出 了 颜色 (主要 颜色 、 次 要 颜色 及 信息 颜色 ) ; 每 个 条 目 
给 出 颜色 名 、 十 六 进 制 值 及 其 用 途 (比如 ， 深 蓝 色 ，#0678BE， 用 作 刊 头 的 背景 色 ) (55 
见 彩 插图 7-10) 











Brett Jankord 上 的 Style Guide Boilerplate (风格 指南 样板 文件 ， 参 见 http://brettjankord.com/ 
projects/style-guide-boilerplate/) 也 十 分 有 帮助 。 


下 面 是 各 种 类 型 的 网 站 风格 指南 的 优秀 范例 : 
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。 Starbucks.com (http://www.starbucks.com/static/reference/styleguide/, 29 WERE) ; 

* South Tees Hospitals NHS Foundation Trust (http://www.southtees.nhs.uk/style-guide/, 2JJA. 
格 指南 ) ; 

。 Drupal.org (http://drupal.org/coding-standards ， 为 编码 标准 ) ; 

。 BBC 的 数字 化 服务 (http:/www.bbc.co.uk/gel， 为 全 球体 验 语 言 ) ; 

e Paul Robert Lloyd (http://www.paulrobertlloyd.com/about/styleguide/, 7j HTML 标记 风格 
指南 )。 


7.6 ”响应 式 设计 工具 


在 设计 网 站 时 你 应 该 使 用 什么 工具 呢 ? 








WE: 正确 的 工具 应 能 为 你 所 用 并 能 带 给 你 最 终 的 产品 。 这 并 没有 唯一 正确 的 答案 ， 客 户 
也 不 关心 你 使 用 什么 工具 ， 他 们 只 是 需要 一 个 网 站 。 











7.6.1 Adobe Photoshop 
Photoshop 历来 都 是 设计 网 站 最 常用 的 工具 。 但 是 Photoshop 设计 样稿 本 质 上 只 是 一 张 网 站 
片 。 如 果 你 的 目标 是 做 一 个 在 所 有 浏览 器 中 都 具有 完全 相同 显示 效果 的 网 站 (这 是 我 们 
之 前 多 年 来 的 目标 )， 一 张 图 片 确实 就 能 搞定 。 但 是 现在 ， 我 们 试图 让 一 个 网 站 在 不 同 的 
视 口 宽度 下 有 不 同 的 外 观 ， 一 个 网 站 一 幅 图 片 显然 不 再 适用 。 















































但 在 部 分 设计 过 程 中 可 能 仍 要 使 用 Photoshop ， 比 如 设计 特定 的 页 面 元 素 或 图 片 素材 。 








[小 贴 士 ] 

如 果 你 正在 使 用 Photoshop， 想 让 它 能 更 好 地 工作 于 你 的 响应 式 设计 过 程 ， 可 查看 Dan 
Rose 发 表 在 Smashing Magazine 上 的 “Repurposing Photoshop For The Web" ( http://www. 
smashingmagazine.com/2013/04/22/repurposing-photoshop/ )。 


7.6.2 Adobe InDesign 

很 多 设计 师 已 发 现 Adobe InDesign 在 响应 式 设计 中 更 好 用 。(Photoshop 本 来 就 不 是 一 个 网 
页 设计 工具 ， 它 是 用 来 做 图 片 处 理 的 ， 而 InDesign 才 是 用 于 设计 的 。 从 字面 上 这 显 而 易 
见 ， 不 是 吗 ? ) 





InDesign 含有 网 格 、 样 式 、 包 含 以 及 流 式 页 面 规 则 等 功能 与 特性 来 可 以 帮助 你 构建 响应 式 
布局 。 图 7-11 显示 了 流 式 布 局 选项 ， 该 选项 允许 你 为 多 个 设备 尺寸 创建 布局 。 










































S 7-11: Adobe InDesign 中 的 流 式 布 局 选项 


7.6.3 Adobe Edge Reflow 















Table View | window | Help 
Arrange > 
Workspace > 
Uguid A 
Ha" 4 Cows Articles 
ze Color 
ss v Control 
Editorial 
[ Effects 
Extensions >. - 
inis Folio Builder Em 
Folio Overlays 
cemere Info » Hent dolupta | 
enam Interactive Animation 
ue eaquaes Layers F7 Bookmarks 
«qudd Links ORD v Buttons and Forms 
bes «us Mini Bridge v Hyperlinks 
umconitw Object & Layout » Liquid Layout 
Sieramet Output > — Media 
eres: | v Pages $$r12 Object States 
Stroke rio Page Transitions 
ss Styles bP SWFPreview 08e 
Text Wrap HW Timing 
mok v Tools cus mi 
iria Type & Tables » 
= Utilities P tem fllenit que | 
rerum i 
| v fociis Frame | 
qis v Application Bar dae ped min | 
pediplet r eruntios ipitati | 
aup v InDesign LL.indd @ 54% ttur, illamus eos 
loluptaque i a S rae cum- | 
jui atıt officiis di dolor reicia desequunt ullicia pliamus plam hita errum | 


Edge Reflow 是 Adobe 新 推出 的 一 种 设计 工具 ， 人 允许 你 创建 包含 媒体 查询 的 响应 式 设 计 ， 并 
能 输出 你 设计 稿 的 HTML 和 CSS 代码 交付 给 开发 人 员 。 其 用 意 并 不 是 创建 成 品级 的 代码 ， 











而 是 创建 可 用 于 不 同 屏幕 尺寸 的 响应 式 布局 ， 使 设计 师 能 “分 享 他 们 的 响应 式 设计 意 
这 有 点 像 在 Photoshop 中 创建 设计 样稿 ， 除了 它们 是 响应 式 设计 以 外 。 





图 ” 
S] o 


设计 师 们 使 用 Edge Reflow 基于 网 格 列 来 创建 啊 应 式 布局 ， 并 可 添加 自 定义 字体 或 阴影 等 


CSS 样式 。 不 过 Edge Reflow 的 软件 界面 是 纯粹 面向 设计 的 ， 除 了 输出 之 外 ， 





访问 实际 的 HTML 和 CSS, Edge Reflow 的 界面 如 图 7-12 所 示 。 


并 无 它 法 可 
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Get Outside 





7-12; Adobe Edge Reflow (5303218) 7-12) 


7.6.4 Adobe Dreamweaver 


Adobe Dreamweaver 仍 被 广泛 使 用 ， 它 的 最 新 版 添加 了 一 项 叫 作 流体 网 格 布 局 (fluid grid 
layout) 的 功能 ， 允 许 你 创建 响应 式 布局 。 





遗憾 的 是 ， 当 在 Dreamweaver 中 创建 一 个 网 站 时 ， 你 只 能 指定 三 种 布局 ， 如 图 7-13 所 示 。 
并 不 能 够 自由 地 为 不 同 的 网 站 组 件 在 它们 最 合适 的 断 点 上 添加 媒体 查询 。 
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D Blank Page. 


Tal Blank Template 


Lm Fluid Grid Layout 
[E macto rro m 
Ae(25 | X of column width 
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iC) Page from Sample 


Mobile Tablet Desktop 
460px 768px 1232px 
































: [o1 x» (—í[93 ]x ———([9$9 ]*3—À5 
[o] ome 
OT Gdd Loycuby la spiten Jor dadana saoe.. DOTE 
websites. It contains 3 layouts and typography presets, ali based on a Layout CSS cann fée = 
Reset To Default. Artach CSS file: e5 
[heip  ] [Preferences] cet more contentu [Cnc |] 








& 7-13; Dreamweaver 的 网 站 布局 配置 界面 ， 你 只 能 为 网 站 指定 三 种 布局 


在 每 一 个 布局 内 部 ， 你 可 以 选择 想 要 的 列 数 ， 并 在 网 格 中 添加 和 移动 元 素 。 由 此 产生 的 
CSS 使 用 百分比 宽度 和 浮动 样式 ， 因 此 布局 能 够 适应 不 同 的 屏幕 尺寸 。 








7.6.5 浏览 

虽然 上 述 工 具 都 很 有 用 ， 但 许多 设计 师 发 现 跳 过 图 像 编 辑 软 件 直接 在 浏览 器 中 进行 设计 要 
更 方便 。 

通过 在 浏览 器 中 开始 设计 ， 可 以 确保 不 会 出 现 设 计 最 终 在 训 览 器 中 有 不 同 的 显示 效果 的 
情况 。 

















我 有 很 多 次 作为 一 个 客户 ， 与 许多 不 同 的 设计 公司 一 起 工作 。 我 发 现实 际 网 站 的 显示 效果 
总 是 与 Photoshop 设计 稿 有 很 大 的 出 入 ， 即 便 对 于 静态 网 站 也 是 如 此 ， 比 如 训 览 器 中 的 字 
体 泻 染 效 果 不 同 ， 内 容 没有 以 期 望 的 方式 对 齐 等 。 开 发 人 员 尝 试 全 盘 复 制 Photoshop 设计 
稿 ， 但 他 们 使 用 的 是 完全 不 同 的 工具 ， 所 以 这 并 设 有 那么 简单 。 那 么 为 什么 要 投入 这 么 多 
的 努力 使 其 物 看 起 来 “完美 ”， 但 事实 上 在 最 终 的 产品 中 又 看 起 来 不 一 样 呢 ? 


通过 直接 在 浏览 器 中 进行 设计 ， 你 可 以 使 设计 一 开始 就 是 响应 式 的 ， 因 此 毫 无 疑问 网 站 的 
外 观 在 所 有 屏幕 尺寸 上 都 会 符合 预期 。 
设计 师 生 成 的 代码 不 需要 与 最 终 在 实际 网 站 中 使 用 的 代码 是 一 样 的， 所 以 不 用 担心 它 是 否 完 
美 。 使 用 浏览 器 进行 设计 可 以 节省 后 面 的 时 间 ， 尤 其 当代 码 还 是 正确 结构 化 的 HTML 时 。 
当然 直接 在 浏览 器 中 进行 设计 也 有 缺点 。 你 缺乏 直接 操纵 对 象 〈 比 如 线条 和 图 形 ) 的 控制 
手段 。 如 果 页 面 上 有 图 形 元 素 ， 它 们 必须 分 开 来 设计 。 
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不 用 浏览 器 进行 设计 的 设计 师 在 设计 过 程 中 应 与 开发 人 员 密切 合作 ， 了 解 其 设计 将 会 怎样 
呈现 在 不 同 尺 寸 的 屏幕 上 。 他 们 至 少 应 该 对 HTML 和 CSS 的 工作 方式 ， 特 别 是 用 于 响应 
式 设计 的 代码 (比如 媒体 查询 ) 的 工作 方式 有 一 个 基本 的 了 解 。 


如 果 是 直接 在 浏览 器 中 进行 设计 ， 你 可 以 使 用 电脑 自 带 的 文本 编辑 器 创建 页 面 ， 比 如 Mac 
OS 中 的 TextEdit 或 Microsoft Windows 中 的 记事 本 。 或 者 你 可 以 使 用 诸如 Sublime Text 
(http://www.sublimetex.com) 这 样 的 代码 编辑 器 ， 其 界面 特别 适合 编写 各 种 风格 的 代码 。 


7.7 ”推销 响应 式 设计 
如 果 你 正在 阅读 本 书 ， 你 也 许 已 经 被 响应 式 设计 的 理念 所 迷 住 ， 但 很 有 可 能 你 仍 需 要 向 别 
人 推销 它 。 

问题 的 关键 在 于 如 何 说 服 你 的 同事 : 我 们 公司 应 该 考虑 将 响应 式 设计 用 于 网 站 的 重新 设 
计 。 或 者 ， 如 果 你 在 一 家 设计 公司 工作 ， 可 能 还 要 说 服 客户 : 响应 式 设 计 对 他 们 的 网 站 来 
说 是 最 佳 的 选择 。 

































































不 管 你 是 什么 角色 ， 你 都 很 可 能 会 与 从 未 听 说 过 或 未 真正 理解 


m 








3 
Ez] 


外 应 式 设 计 的 人 共事 。 
在 本 节 中 ， 你 将 了 解 如 何 向 客户 、 同 事 和 其 他 利益 相关 者 推销 响应 式 设计 理念 。 
7.7.1 为 什么 要 用 响应 式 设计 

儿 个 月 前 ， 我 与 一 家 小 网 站 制作 公司 的 两 名 工作 人 员 聊 起 响应 式 设 计 。 其 中 一 人 是 开发 人 


员 ， 他 对 能 够 创建 可 在 所 有 设备 上 工作 的 网 站 的 理念 感到 非常 激动 。 他 们 公司 还 从 未 做 过 
任何 响应 式 设 计 项 目 ， 但 他 正在 试 着 努力 学 习 。 






































另 一 个 人 是 销售 人 员 。 我 问 他 ， 他 们 是 否 尝试 过 向 潜在 客户 推销 响应 式 设 计 ， 他 说 没有 ， 
他 们 打算 继续 向 客户 推销 单独 的 桌面 和 移动 网 站 。 


























原因 在 于 : 销售 团队 觉得 客户 会 因为 他 们 能 获得 两 个 而 不 是 一 个 网 站 而 愿意 支付 更 多 的 钱 。 


也 许 确实 如 此 ， 但 是 除了 有 那么 一 点 缺乏 职业 道德 外 ， 它 也 不 是 一 个 良好 的 商业 习惯 。 对 
于 许多 网 站 而 言 ， 如 果 你 想 要 一 个 网 站 在 未 来 数 年 内 都 是 可 用 的 ， 响 应 式 设计 是 最 佳 选 
择 。 虽 然 有 些 情况 下 ， 单 独创 建 一 个 手机 版 站 点 可 能 会 更 好 ， 但 通常 你 应 首先 考虑 响应 式 
设计 。 























不 让 你 的 客户 知道 他 们 可 以 选择 响应 式 设计 ， 意 味 着 客户 得 到 的 网 站 很 可 能 在 上 线 之 后 不 
久 就 会 令 他 们 感到 不 满 ， 因 为 他 们 意识 到 网 站 不 能 在 所 有 设备 之 上 工作 且 不 够 灵活 ， 跟 不 
上 互联 网 形势 的 变化 。 


























如 果 你 真 的 希望 公司 赚钱 ， 你 的 目标 就 应 该 是 让 客户 在 最 后 结 清 账 款 以 后 很 长 的 一 段 时 间 











里 仍然 感到 满意 。 如 果 你 提供 的 网 站 能 在 数 年 内 满足 客户 的 需求 ， 他 们 将 变 成 你 的 回头 客 
并 会 向 他 人 推荐 你 的 公司 。 


如 有 果 你 的 设计 公司 拒绝 响应 式 设计 的 理由 是 因为 它 太 难 了 ， 或 者 是 因为 你 认为 推销 单独 的 
手机 版 网 站 能 赚 更 多 的 钱 ， 你 就 应 该 重新 思考 现在 销售 的 网 站 在 将 来 是 否 仍 会 让 客户 满 
意 ， 如 果 能 让 客户 满意 ， 他 们 将 帮助 你 进一步 地 拓展 业务 ， 反 之 ， 你 的 业绩 就 不 会 长 久 。 
更 重要 的 是 ， 能 够 制作 设计 恨 好 的 响应 式 网 站 将 给 你 带 来 竞争 优势 ， 因 为 还 不 是 谁 都 知道 
怎么 做 。 












































7.7.2 教育 你 的 客户 

你 有 责任 教育 客户 及 潜在 客户 一 个 好 网 站 的 构成 要 素 是 什么 。 
客户 会 带 着 想法 来 找 你 ， 但 并 非 所 有 想法 都 是 好 的 ， 不 要 被 客户 牵 着 鼻子 走 。 合 理 采 纳 他 
们 的 想法 并 利用 你 拥有 的 专业 技能 和 知识 把 它们 变 得 更 好 ， 那 才 是 他 们 付 给 你 报酬 的 原因 。 
客户 就 经 常会 说 他 们 想 要 一 个 “手机 网 站 ”或 “手机 应 用 "。 他 们 单纯 地 认为 要 使 网 站 能 
在 手机 上 浏览 必须 要 另外 构建 一 个 单独 的 网 站 ， 并 不 知道 其 实 还 有 别 的 选择 。 


如 果 客 户 来 找 你 ， 并 说 他 们 只 是 想 要 一 个 手机 网 站 ， 你 可 以 告诉 他 们 摆 在 他 们 面前 的 选择 
有 了 哪些， 这 其 中 包括 了 响应 式 设计 。 如 果 他 们 不 太 了 解 网 站 是 如 何 工作 的 ， 甚 至 可 能 都 不 
知道 响应 式 设 计 的 存在 ， 即 使 知道 ， 可 能 对 其 工作 方式 也 有 误解 。 






























































这 是 你 的 机 会 ， 让 他 们 知道 响应 式 设计 对 其 可 能 是 一 个 更 好 的 选择 ， 因 为 他 们 可 以 只 保留 
一 个 站 点 ， 而 不 用 去 维护 多 个 。 而 且 这 一 个 网 站 就 能 适用 于 所 有 的 设备 ， 而 不 只 是 某 些 尺 
寸 屏 幕 的 设 
你 的 工作 是 确定 对 于 客户 的 每 个 问题 什么 是 最 好 的 解决 方案 ， 并 将 解决 方案 推销 给 他 们 。 
如 有 果 他 们 从 未 听 说 过 响应 式 设 计 ， 但 你 认为 他 们 的 网 站 应 该 采用 响应 式 设计 方案 ， 就 需要 
帮助 其 理解 什么 是 响应 式 设计 并 让 其 相信 响应 式 设计 是 解决 问题 的 最 好 方案 。 





















































7.7.8 强调 响应 性 

记 住 ， 你 的 最 终 目标 并 不 仅仅 是 制作 一 个 良好 的 满足 商业 目标 和 用 户 需 求 的 响应 式 网 站 ， 
还 应 该 确保 客户 对 其 满意 。 

如 果 你 创建 了 世界 上 最 好 的 网 站 ， 但 客户 对 此 并 不 满意 ， 因 为 它 不 是 他 们 想 要 的 网 站 ， 那 
你 显然 就 有 问题 了 。 


你 需要 确保 客户 能 理解 整个 设计 过 程 中 所 出 现 的 事物 。 在 设计 过 程 的 每 个 环节 上 都 不 忘 提 
醒 他 们 你 是 在 创建 一 个 响应 式 网 站 ， 以 及 其 意味 着 什么 。 在 各 种 不 同 的 设备 上 向 他 们 展示 
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设计 ， 使 他 们 能 够 明白 页 面 布局 在 不 同 的 屏幕 尺寸 上 会 发 生 怎样 的 变化 。 

如 果 到 了 设计 的 最 后 阶段 ， 你 却 发 现 客户 对 网 站 在 电脑 上 与 在 手机 上 的 显示 效果 不 一 样 
而 感到 困惑 ( 真 的 ， 我 听 说 过 有 这 样 的 事 )， 那 就 是 你 没有 把 响应 式 设计 理念 的 沟通 工作 
做 好 。 









































响应 式 设 计 对 人 们 是 一 个 新 的 理念 。 不 要 认为 在 你 初次 解释 它 后 人 们 就 能 立刻 理解 它 。 不 
断 地 向 他 们 展示 什么 是 响应 式 设计 ， 直 到 他 们 能 够 理解 为 止 。 




















7.7.4 ”响应 式 设 计 并 不 总 是 最 佳 选择 
请 记 住 ， 响 应 式 设 计 并 非 万 能 钥匙 。 大 多 数 时 候 它 是 一 个 很 好 的 解决 方案 ， 但 下 面 列 出 的 
一 些 原因 也 使 其 可 能 并 非 最 佳 解决 方案 : 














。 项 目 团 队 缺 乏 足 够 的 经 验 来 很 好 地 实施 响应 式 设计 (但 获得 的 经 验 教训 可 让 你 在 下 一 项 
目 中 受益 ) ; 

。 客户 没有 足够 的 资金 支付 响应 式 网 站 的 额外 费用 (但 确保 让 他 们 知道 响应 式 设计 具有 的 
长 期 收益 很 可 能 会 帮 他 们 市 省 更 多 的 费用 ) ， 

。 网 站 用 于 短期 临时 性 项 目 ， 比 如 即将 举行 的 活动 ， 且 你 可 以 只 关注 特定 的 设备 ， 不 需 担 
心 将 来 的 设备 兼容 性 。 























7.7.5 费用 
你 会 从 客户 那 听 到 一 个 癌 了 无 数 遍 的 问题 : 做 一 个 响应 式 网 站 要 多 少 钱 ? 





他 们 想 要 一 个 具体 的 答案 。 比 固定 宽度 网 站 贵 25%， 两 倍 ， 还 是 若干 美元 ? 


不 季 的 是 ， 对 这 个 问题 没有 一 个 明确 的 答案 。 如 何 创建 一 个 响应 式 网 站 是 千变万化 的 ， 就 
如 同 如 何 创建 任何 网 站 一 样 。 如 果 你 就 同样 的 网 站 项 目 向 多 家 设计 公司 咨询 价格 时 ， 你 肯 
定 会 发 现 报 价 也 是 各 不 相同 的 。 




















设计 一 个 响应 式 网 站 的 费用 几乎 肯定 比 同等 条 件 下 设计 一 个 国定 宽度 网 站 的 费用 要 高 。 因 
为 有 更 多 的 工作 要 做 : 布局 不 是 固定 的 大 小 ， 你 必须 使 布局 能 随 屏 幕 尺 寸 变化 ， 那 么 这 至 
少 都 意味 着 需要 额外 添加 媒体 查询 。 


费用 的 高 低 实际 上 取决 于 网 站 的 复杂 程度 。 可 能 几 条 媒体 查询 就 够 了 ， 也 可 能 存在 某 些 设 
计 元 素 需 要 额外 的 关注 。 














这 还 取决 于 客户 想 要 一 个 怎样 的 响应 式 网 站 。 有 很 多 细 届 可 以 深入 研究 ， 比 如 根据 屏幕 宽 
度 略 微调 整 字体 大 小 以 充分 利用 屏幕 空间 。 尽 管 这 可 能 使 得 网 站 更 耐看 、 更 好 用 ， 但 它 对 
于 响应 式 站 点 不 是 必需 的 。 
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客户 需要 更 多 的 费用 吗 ? 是 的 。 但 是 他 们 不 会 为 同样 的 最 终结 果 花 费 更 多 。 响 应 式 网 站 将 
能 在 更 多 的 设备 上 工作 ， 这 意味 着 他 们 能 增加 潜在 的 用 户 群 。 响 应 式 站 点 的 存续 周期 会 更 
长 ， 所 以 额外 的 花费 其 实 是 对 未 来 的 投资 。 


需要 牢记 的 一 件 事情 是 ， 如 有 果 创 建 网 站 的 团队 成 员 是 响应 式 设计 的 新 手 ， 那 么 在 开发 的 过 
程 中 ， 必 定 要 花费 额外 的 时 间 去 学 习 和 尝试 新 事物 。 你 可 能 需要 付出 额外 的 努力 来 使 某 事 
物 正确 工作 ， 你 可 能 不 得 不 做 研究 来 找 出 实现 某 事物 的 最 佳 方式 。 这 些 都 需要 额外 的 工作 
时 间 ， 你 需要 对 此 预先 计划 ， 而 且 通 常 来 说 这 也 不 是 一 个 可 以 转嫁 给 客户 的 费用 成 本 。 


7.8 与 客户 合作 


正如 我 前 面 说 明 的 那样 ,，“ 客 户 ” 一 词 并 不 仅仅 指 设计 公司 的 客户 ， 它 也 包括 企业 内 部 负 
责 网 站 的 员工 所 服务 的 内 部 客户 及 项 目 中 的 其 他 利益 相关 者 。 因 此 ， 即 使 你 不 是 在 某 个 设 
计 公司 工作 或 是 只 是 一 个 自由 职业 者 ， 本 市 对 你 也 很 有 帮助 。 



























































你 的 客户 或 利益 相关 者 通常 会 带 着 预期 目标 来 到 谈判 桌 上 。 他 们 需要 一 个 网 站 ， 但 他 们 真 
正 需要 的 是 能 解决 他 们 的 问题 。 你 需要 帮助 他 们 找 出 理想 的 解决 方案 是 什么 ， 先 询问 以 下 
问题 。 








。 他 们 想 在 网 站 上 放 什么 样 的 内 容 ? 

。 内 容 的 目标 受众 是 谁 ? 是 否 有 分 析 数 据 来 文 持 此 设 定 ? 

。 网 站 更 新 的 频率 ， 以 及 由 谁 负责 更 新 ? 

。 在 现 有 网 站 中 存在 的 哪些 问题 他 们 希望 在 新 网 站 中 能 够 避免 ? 


你 掌握 的 信息 越 多 ， 带 给 客户 的 最 终结 果 也 会 越 好 。 
7.8.1 交付 物 


响应 式 网 站 的 交付 物 与 以 往 国定 宽度 网 站 的 交付 物 可 能 最 终 会 有 很 大 的 不 同 ， 比 如 线 框图 
和 样稿 修订 。 

















你 仍然 有 交付 物 ， 如 内 容 架 构 、 响 应 式 原 型 和 样式 板 ， 但 因为 你 改变 了 设计 进程 的 思考 方 
式 ， 你 也 需要 改变 交付 物 的 思考 方式 。 

一 开始 ， 在 设计 一 个 网 站 时 你 的 工作 不 是 去 创建 一 个 交付 物 ， 而 是 去 设计 一 个 网 站 。 交 付 
物 只 不 过 是 帮助 确保 项 目 步 入 正轨 这 一 过 程 的 产物 而 已 。 





























可 能 你 负责 过 有 初始 需求 的 项 目 一 一 召集 与 客户 的 会 面 确定 目标 ， 在 设计 团队 工作 了 一 段 
时 间 后 ， 紧 接着 是 开会 向 客户 展示 你 建议 的 设计 。 客 户 对 你 在 此 期 间 做 了 哪些 工作 之 不 知 
情 ， 可 供 选 择 的 几 个 设计 方案 是 刚刚 “透露 的 "。 他 们 只 能 从 中 选 出 一 个 ， 在 后 续 的 过 程 
中 被 迫 接受 该 设计 。 
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尽管 这 是 戏剧 性 和 令 人 兴奋 的 ， 但 这 通常 并 不 会 使 客户 得 到 令 他 们 满意 的 产品 ， 因 为 他 们 
被 排除 在 设计 过 程 之 外 。 更 好 的 选择 是 让 客户 能 在 项 目 中 分 享 他 们 的 观点 。 


对 于 一 个 响应 式 网 站 ， 你 不 能 像 过 去 常 做 的 那样 把 交付 物 作 为 最 终 产 品 ， 因 为 在 这 个 过 程 
中 需要 有 更 多 的 灵活 性 。 交 付 物 是 一 个 迭代 过 程 的 工作 文档 ， 它 们 不 是 一 成 不 变 的 。 


你 肯定 不 想 陷 人 这 种 境地 : 中 间 阶 段 的 设计 文档 被 客户 “批准 ”( 比 如 把 握 财 权 的 高 层 利 
益 相关 方 )， 之 后 ， 当 发 现 某 个 不 同 的 事物 能 工作 得 更 好 时 ， 客 户 却 不 允许 做 出 更 改 ， 因 
为 先前 的 工作 已 经 被 上 司 “ 批 准 “， 他 们 不 想 回 到 上 司 那里 说 先前 的 决定 是 错误 的 。 你 要 
知道 ， 在 设计 阶段 没有 什么 必须 是 一 成 不 变 的 。 












































要 制作 出 客户 真正 满意 的 网 站 ， 你 需要 意识 到 客户 也 是 设计 团队 一 份子 。 让 他 们 从 一 开始 
就 参与 到 设计 过 程 中 来 ， 并 共同 做 出 决定 。 

















当然 ， 在 整个 过 程 中 都 允许 做 出 改变 并 不 意味 着 允许 客户 更 改 项 目的 范围 而 不 增加 费用 。 
通过 尽早 做 出 高 层 决策 ， 并 逐步 夯实 它 ， 你 应 该 能 够 提供 让 客户 满意 的 最 终 设计 。 


并 且 记 住 ， 并 非 所 有 的 项 目 文档 都 是 交付 物 。 用 工作 文档 记录 团队 的 工作 ， 这 样 每 个 人 都 清 
楚 项 目 进行 到 了 什么 阶段 ， 以 及 在 此 阶段 需要 做 些 什么 。 这 些 工作 文档 不 需要 与 客户 共享 。 




















[小 贴 士 ] 

如 果 在 创建 项 目 文 档 时 需要 帮助 ， 你 可 以 参考 Dan Brown 的 《高 效 设 计 沟 通 之 道 ( 原 书 第 2 
版 )》( http://communicatingdesign.com )， 了 解 如 何 创 建 网 站 地 图 、 流 程 图 、 线 框图 以 及 人 物 
角色 等 细节 。 


7.8.2 ”陈述 报告 

如 果 你 是 与 一 个 团队 一 起 工作 ， 在 与 客户 会 面向 他 们 展示 设计 进展 时 ， 所 有 参与 设计 的 工 
EAR (视觉 设计 师 、 用 户 体验 设计 师 等 ) 都 应 该 在 场 ， 那 样 他 们 就 能 获得 第 一 手 的 反 
馈 。 你 不 需要 通过 可 能 不 理解 发 生 了 什么 的 项 目 经 理 来 传达 修改 意见 。 






































尽管 有 响应 式 原型 是 好 的 ， 因 为 你 可 以 向 客户 演示 站 点 是 如 何 响应 不 同 视 口 宽度 的 ， 但 你 
必需 把 控 整 个 陈述 过 程 。 在 项 目 早 期 ， 应 使 用 你 自己 的 电脑 做 演示 ， 你 肯定 不 希望 在 错漏 
还 没有 全 部 解决 之 前 ， 让 客户 用 他 们 的 手机 或 设备 进行 体验 。 


在 项 目 早期 ， 你 可 能 只 是 想 简单 地 展示 下 屏幕 截图 ， 这 样 你 就 可 以 专注 于 网 站 在 主要 断 点 
处 的 显示 效果 ， 而 不 是 网 站 的 行为 或 者 交互 。 

首先 从 展示 小 屏幕 布局 开始 ， 解 释 这 种 布局 是 用 户 在 像 手机 那样 的 小 屏幕 设备 以 及 一 些 功 
能 有 限 的 老式 浏览 器 和 设备 上 所 看 到 的 ， 然 后 再 转向 更 大 屏幕 宽度 的 布局 。 
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此 外 ， 确 保 早 期 会 议 侧重 于 大 问题 ， 而 不 是 小 细节 。 你 希望 字体 大 小 与 布局 相 适 应 ， 而 不 
是 围绕 客户 想 要 的 确切 的 字体 大 小 来 构建 布局 。 




















让 讨论 紧 扣 主题 ， 同 时 确保 你 的 展示 进行 地 足够 慢 以 便 客 户 能 够 真正 看 到 所 有 细节 。 

记 着 经 常 向 客户 展示 设计 进度 以 便 不 会 出 现 令 客 户 大 吃 一 惊 的 事 。 你 要 避免 所 谓 的 “大 揭 
秘 ”， 将 设计 突然 就 一 下 子 展现 在 客户 面前 。 

当 你 转 去 展示 实时 原型 ， 并 演示 当 视 口 大 小 发 生变 化 时 布局 是 如 何 改 变 的 时 候 ， 确 保 客户 
明白 ,调整 浏览 器 窗口 大 小 所 看 到 的 显示 效果 与 网 站 在 实际 设备 上 观看 的 效果 是 有 差异 
的 。 如 果 在 开会 时 没有 更 多 的 设备 可 用 ， 你 可 以 用 屏幕 截图 代替 。 



































应 明确 告知 客户 设计 中 的 任何 事物 都 是 可 以 改变 的 ， 也 应 该 改变 ， 如 果 感 觉 它们 不 是 最 佳 
方案 的 话 。 在 任何 时 候 客户 都 能 随时 提供 反馈 ， 具 有 全 新 眼光 的 客户 往往 能 发 现 你 的 团队 
从 未 注意 到 的 错误 或 问题 。 











[小 贴 士 ] 

如 果 你 需要 一 种 向 基于 HTML 的 原型 添加 标注 的 方法 ， 可 以 试 下 Elliance 公司 的 Metaframe 
工具 ( https://github.com/elliance/metaframe/ )， 它 允许 你 用 一 个 简单 的 CSS 类 在 页 面 设计 上 
添加 带 编号 的 标注 。 


7.9 m 

在 本 章 中 ， 我 们 探讨 了 在 创建 网 站 的 视觉 设计 之 前 为 什么 要 先 从 用 户 研 究 和 内 容 策略 人 手 
的 原因 。 
我 们 还 探讨 了 设计 流程 中 的 各 个 步 台 ， 先 用 草图 绘制 设计 理念 并 以 小 屏幕 优先 的 视角 来 进 
行 布 局 思 芳 。 我 们 谈 到 了 原型 ， 以 及 响应 式 原型 与 传统 的 线 框图 的 差异 。 


























我 们 学 习 了 使 用 样式 板 呈现 网 站 的 视觉 观感 ， 以 及 可 以 用 什么 工具 来 设计 响应 式 网 站 。 





最 后 ， 我 们 讲 了 如 何 向 客户 或 同行 推销 响应 式 设计 ， 以 及 如 何 与 客户 在 响应 式 项 目 上 合 
作 ， 以 确保 客户 对 他 们 能 得 到 什么 样 的 网 站 有 一 个 清晰 的 认识 。 








在 下 一 章 中 ， 我 们 将 谈 谈 响应 式 网 站 的 用 户 体 验 ， 以 及 移动 设备 需要 你 对 设计 思考 方式 做 
出 何 种 改变 。 
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当 你 创建 一 个 响应 式 网 站 时 ， 有 两 件 事 需要 充分 考虑 : 用 户 与 设备 。 在 本 章 中 ， 我 们 将 对 
两 者 进行 全 面 地 讨论 。 


首先 ， 我们 来 看 看 什么 是 用 户 体 验 ， 它 为 什么 重要 。 随 后 ， 我 们 将 讨论 确保 网 站 在 尽 可 能 
多 的 设备 上 有 效 工作 、 良 好 显示 的 设计 策略 。 

接 下 去 ， 我们 将 重 温 现 有 的 设备 类 型 ， 以 及 一 些 属于 重要 设计 考量 的 设备 特性 ， 比 如 触摸 
及 屏幕 尺寸 。 我 们 还 将 讨论 如 何 确保 你 的 网 站 对 于 残障 用 户 也 是 可 访问 (无 障碍 ) 的 。 


最 后 ， 我 们 将 讨论 响应 式 网 站 的 济 试 一 一 应 该 支持 哪些 设备 并 用 其 来 测试 网 站 ， 如 何 获得 
这 些 设备 ， 在 没有 实际 设备 时 你 又 可 以 做 怎样 的 测试 。 


8.1 用 户 体 验 


在 制作 一 个 网 站 时 ， 你 的 工作 并 不 仅仅 是 使 网 站 好 看 , 而 是 要 使 网 站 能 达到 预期 目标 ， 且 
运行 良好 。 

电子 商务 网 站 可 以 有 非常 漂亮 的 产品 页 ， 但 如 果 用 户 在 完成 支付 过 程 中 遇 到 困难 ， 并 因此 
去 了 其 他 网 站 ， 那 再 怎么 漂亮 也 是 没有 意义 的 。 


用 户 体验 一 直 是 网 页 设计 的 重要 组 成 部 分 ， 但 很 长 一 段 时 间 以 来 我 们 没有 为 之 付出 太 多 的 
努力 ， 因 为 所 有 用 户 的 体验 都 非常 相似 ， 他 们 都 是 用 的 台式 机 或 笔记 本 电脑 ， 具 有 类 似 尺 
十 的 屏幕 ， 使 用 键盘 、 鼠 标 或 触 控 板 进行 导航 。 我 们 的 设计 也 是 在 同样 类 型 的 设备 上 进行 
的 ， 所 以 很 容易 预测 其 他 用 户 是 如 何 体验 网 站 的 。 
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但 现在 一 切 都 不 同 了 。 不 仅 是 屏幕 尺寸 多 变 ， 从 小 不 点 到 巨 无 霸 ， 应 有 尽 有 ， 而 且 我 们 与 
网 站 的 交互 方式 也 变 得 多 种 多 样 ， 从 触 控 板 到 语音 控制 ， 各 不 相同 。 

















我 们 也 已 经 不 再 把 互联 网 想 成 我 们 体验 过 的 某 个 事物 。 过 去 我 们 会 坐 在 提前 ， 打 开 电 脑 然 
后 上 网 。 但 现在 我 们 总 是 处 在 随时 联网 的 状态 下 ， 我 们 可 以 从 口袋 中 掏 出 手机 随时 随地 进 
行 各 种 交互 。 我 们 可 以 把 电视 或 游戏 机 连 上 了 网， 甚至 在 多 个 设备 上 同时 与 浏览 器 进行 交互 。 












































要 记 住 一 点 ， 响 应 式 设 计 并 不 仅仅 是 为 移动 设备 进行 设计 。 现 在 我 们 倾向 于 关注 移动 设 
， 是 因为 我 们 以 往 都 是 为 非 移动 设备 做 设计 ， 自 然 的 ， 我 们 需要 对 移动 设备 进行 更 多 学 
习 和 适应 。 但 仍 有 很 多 人 是 坐 在 桌 旁 面 对 着 显示 器 的 ， 所 以 你 创建 的 网 站 不 能 只 仅仅 为 移 
动 设备 进行 过 优化 ， 而 忽略 了 使 用 键盘 和 显示 器 的 人 们 。 



























































在 制作 一 个 响应 式 网 站 之 前 ， 你 需要 对 浏览 它 的 设备 以 及 用 户 与 这 些 设备 的 交互 方式 进行 
了 解 。 你 的 目标 是 拥有 这 样 一 个 网 站 ， 它 能 在 广泛 的 现 有 设备 上 工作 ， 同 时 也 是 未 来 友好 
型 的 ， 能 够 兼容 于 还 未 被 发 明 出 来 的 设 









































8.1.1 用 户 至 上 
哪怕 是 在 我 们 开始 谈论 移动 设备 之 前 ， 我 们 还 是 需要 在 用 户 问 题 上 再 多 讲 一 些 。 毕 况 , 在 
你 制作 一 个 网 站 时 ， 用 户 是 方程 式 中 最 重要 的 部 分 。 


HTMLS 和 CSS3 支持 的 新 特性 加 上 市 场 上 所 有 新 型 移动 设备 的 创新 性 ， 很 容易 使 人 兴奋 得 
忘乎所以 ， 并 花费 时 间 和 努力 去 开发 激动 人 心 的 网 站 向 世人 炫 技 。 

但 是 请 记 住 ， 网 站 的 目的 并 不 是 要 在 技术 上 给 人 以 深刻 的 印象 。 学 会 设计 与 开发 一 个 网 站 
并 不 仅仅 是 编写 呈现 网 站 的 代码 。 它 是 要 为 使 用 网 站 的 人 们 创造 一 种 体验 。 












































差不多 所 有 的 网 络 从 业 人 员 都 在 谈论 响应 式 设计 ， 制 作 响 应 式 网 站 和 思考 响应 式 设计 。 我 
们 需要 明白 ， 普 通 的 网 站 用 户 并 不 知道 什么 是 响应 式 设计 ， 也 不 需要 知道 。 
所 有 用 户 想 要 的 是 一 个 能 在 他 们 当时 所 使 用 的 设备 上 良好 工作 的 网 站 ， 这 个 设备 不 一 定 与 


他 们 在 其 他 时 候 所 用 的 设备 相同 。 他 们 并 不 会 去 考虑 自己 在 使 用 什么 设备 ， 他 们 只 是 想 要 
一 个 能 工作 的 网 站 。 



































用 户 不 会 考虑 这 样 一 个 事实 :他们 在 上 班 路 上 使 用 手机 访问 网 站 ， 在 午休 时 间 使 用 台式 电 
脑 ， 在 深夜 则 边 看 电视 边 用 平板 电脑 上 网 。 使 用 什么 设备 对 他 们 不 重要 ， 他 们 只 要 得 到 一 
个 能 工作 的 网 站 ， 而 不 管 在 使 用 什么 设备 访问 它 。 





























因此 ， 当 你 设计 一 个 响应 式 网 站 时 ， 请 记 住 ， 你 的 目标 不 只 是 创建 一 个 响应 式 网 站 ， 还 要 
创建 一 个 有 效 服务 于 用 户 的 网 站 。 啊 应 式 设计 是 你 将 用 来 创建 这 样 的 站 点 的 工具 。 











用 户 不 会 在 意 网 站 内 部 的 细节 ， 只 是 需要 一 个 能 给 他 们 想 要 的 内 容 和 功能 的 网 站 ， 能 够 尽 
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可 能 省 事 地 去 他 们 想 去 的 地 方 。 


千 万 记 住 ， 是 由 用 户 决 定 他 要 使 用 什么 样 的 设备 ， 而 不 是 由 你 。 你 可 以 决定 支持 哪些 类 型 
的 设备 ， 但 是 如 果 你 的 网 站 不 能 在 用 户 想 要 使 用 的 设备 上 工作 ， 你 会 失去 这 些 客户 。 











8.1.2 手机 用 户 的 廖 见 

iPhone 刚 一 问世 ， 我 们 也 开始 设计 能 在 手机 上 工作 的 网 站 ， 随 即 产 生 了 这 样 一 个 关于 “ 手 
BLUR PESE: 认为 使 用 手机 的 人 都 是 “在 外 面 ” 四 处 奔走 忙 个 不 停 ， 急 于 去 某 个 地 方 ， 
急于 获得 信息 。 典 型 的 手机 用 户 并 不 会 想 要 浏览 网 页 ， 他 只 是 想 获得 快捷 信息 ， 比 如 一 个 
餐厅 的 地 址 或 其 航班 是 否 准时 。 


在 那 一 阶段 ， 这 一 次 见 可 能 是 正确 的 。 在 智能 手机 上 访问 网 站 的 体验 很 糟 。 那 时 还 没有 响 
应 式 网 站 其 至 移动 版 网 站 都 很 少 ， 因 此 基于 台式 机 屏幕 设计 的 网 站 在 手机 上 被 缩 得 极 小 ， 
要 想 阅 读 必须 不 断 地 放大 缩小 。 因 此 绝 无 必 要 ， 用 户 不 会 用 手机 访问 网 站 ， 留 着 在 家 中 或 
办 公 室 中 用 电脑 上 网 显然 容易 得 多 。 














但 那 之 后 网 站 开始 做 出 改变 以 适应 手机 ， 而 且 在 手机 上 做 事 也 变 得 越 来 越 容 易 。 然 后 平板 
电脑 出 现 ， 其 算 移动 设备 ， 但 又 不 全 算 ， 因 为 大 多 数 平板 电脑 只 支持 WiFi， 所 以 你 使 用 它 
们 时 并 不 能 真正 地 在 外 四 处 随意 走动 。 

现在 人 们 无 时 无 刻 不 在 使 用 着 手机 ， 不 管 是 在 户外 还 是 坐 在 离 笔记 本 仅 几 步 之 遥 的 家 中 沙 
发 上 ， 这 一 切 都 是 因为 手机 更 为 易 用 。 

越 来 越 多 的 人 依靠 移动 设备 作为 他 们 的 主要 或 唯一 的 访问 互联 网 的 方式 ， 所 以 你 不 能 继续 
假设 用 户 只 是 想 查 找 餐厅 地 址 或 航班 时 间 。 人 们 想 要 在 他 们 的 移动 设备 上 做 任何 事 ， 就 像 
他 们 能 在 桌面 电脑 上 所 做 的 一 样 ， 只 要 你 能 让 他 们 那么 做 。 






























































8.1.3 为 应 用 环境 设计 
虽然 我 们 不 应 该 去 假设 特定 设备 的 用 户 只 需要 某 些 内 容 或 交互 功能 ， 但 我 们 可 以 确定 网 站 
的 哪些 特定 部 分 在 某 种 设备 上 用 得 更 多 ， 并 去 确保 这 些 内 容 非 常 容易 访问 。 


例如 ， 我 们 不 能 假设 移动 设备 用 户 只 需要 某 些 内 容 ， 因 为 他 们 不 一 定 是 “在 移动 中 ”并 在 
找寻 “移动 型 内 容 "。 但 不 管 怎样 ， 他 们 可 能 有 时 是 “在 移动 中 ”的 。 并 且 由 于 在 手机 上 
使 用 手指 来 导航 网 站 要 比 在 桌面 上 用 键盘 和 鼠标 导航 网 站 困难 得 多 ， 我 们 应 该 确保 移动 设 
备用 户 能 够 很 容易 地 获取 重要 的 内 容 。 


图 8-1 所 示 的 响应 式 网 站 来 自 澳大利亚 的 Kiwi Bank， 在 其 窒 屏 设计 中 页 面 顶部 只 包括 几 
个 关键 的 链接 及 信息 。 这 些 链接 中 最 上 方 的 是 登录 链接 ， 其 在 宽屏 设计 中 也 是 突出 显示 在 
右上 方 的 。 
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图 8-1: 屏幕 上 最 突出 的 内 容 可 用 媒体 查询 根据 视 口 宽度 来 改变 








紧 随 其 后 的 是 “Find a Branch". (查找 分 行 )， 银 行 客服 电话 ， 以 及 银行 营业 时 间 。 这 些 内 
容 都 是 手机 用 户 在 忙碌 中 想 要 方便 并 快速 获得 的 。 

不 过 在 网 站 的 宽屏 版 中 你 看 不 到 “Find a Branch”、 电 话 号 码 或 者 营业 时 间 。 它 们 仍 是 存在 
的 ， 只 是 需要 点 击 “Contact Us”( 联 系 我 们 ) 才能 看 到 。 桌 面 用 户 很 可 能 没有 那么 急切 ， 
他 不 会 介意 多 点 儿 下 才能 看 到 这 些 信息 ， 在 有 孔 标 可 用 的 时 候 这 很 容易 。 














手机 用 户 仍 能 得 到 你 在 宽屏 设计 中 看 到 的 一 切 ， 只 不 过 在 罕 屏 设计 中 需要 向 下 深 动 才能 
到 导航 及 所 有 的 内 容 。 通 常 查寻 利率 的 手机 用 户 可 能 没有 查寻 分 支 机 构 营 业 时 间 的 手机 用 
户 那么 急切 ， 因 此 他 对 需要 向 下 滚动 屏幕 才能 看 到 利率 信息 不 太 会 介意 。 














8.1.4 只 用 手机 的 用 户 

如 果 你 正在 读 这 本 书 ， 那 么 很 可 能 你 有 份 工 作 ， 一 天 中 的 大 半 时 间 都 是 在 台式 机 或 笔记 本 
电脑 前 ， 需 要 时 你 就 可 以 上 下 网 。 但 别 忘 了 不 是 每 个 人 都 在 办 公 室 中 工作 。 例 如 ， 从 事 服 
务工 作 的 人 们 通常 不 会 把 工作 时 间 花 在 电脑 前 。 他 们 中 的 一 些 人 在 家 里 有 电脑 ， 另 一 些 则 
没有 。 而 且 有 电脑 的 那些 人 中 也 会 有 一 部 分 更 喜欢 使 用 移动 设备 。 











智能 手机 的 崛起 意味 着 越 来 越 多 的 人 通过 移动 设备 上 网 。 按 Pew Internet 的 说 法 ， 在 2013 
年 有 57% 的 美国 人 表示 他 们 使 用 移动 设备 访问 互联 网 。 更 出 人 意料 的 是 这 其 中 有 34% 的 
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用 户 表示 这 是 他 们 的 主要 上 网 方式 。 这 是 一 个 巨大 且 不 断 增长 的 用 户 群体 。 


青少年 日 益 成 为 移动 设备 的 主要 用 户 。 虽 然 他 们 中 的 很 多 人 在 家 中 可 以 使 用 台式 电脑 ， 但 
他 们 觉得 在 手机 上 有 较 大 的 私密 空间 ， 手 机 只 属于 他 们 ， 不 像 台式 电脑 那样 要 与 其 他 家 庭 
ERRE, 没有 太 多 的 隐私 可 言 。 他 们 也 不 像 许多 办 公 室 职员 那样 整 天 坐 在 电脑 前 。 青 少 
年 在 你 的 目标 受众 中 可 能 不 太 重要 ， 但 随 着 他 们 长 大 成 人 ， 他 们 将 继续 轻松 自在 地 使 用 手 
机 作为 其 主要 的 上 网 方式 。 









































这 意味 着 什么 呢 ?” 意 味 着 你 的 网 站 必须 适用 于 所 有 的 设备 。 你 不 能 假设 如 果 某 些 操 作 或 内 
容 对 于 小 屏幕 太 “ 复 杂 "， 用 户 就 会 因此 切换 到 大 屏幕 上 去 ， 然 后 你 就 可 以 忽略 掉 这 些 问 
题 。 但 事实 上 并 不 是 所 有 的 用 户 都 会 这 样 。 


并 且 不 要 以 为 只 要 告诉 用 户 他 们 需要 切换 到 桌面 浏览 器 就 够 了 。 选 择 什么 样 的 设备 不 是 由 
你 而 是 由 用 户 决定 的 。 
































使 任何 事物 在 小 屏幕 上 都 能 容易 使 用 通常 不 太 现 实 ， 但 至 少 不 要 使 之 变 得 不 可 用 。 除 非 ， 
你 愿意 失去 一 部 分 用 户 或 客户 。 


8.1.5 使 用 多 个 设备 


在 创建 能 在 任意 尺寸 的 屏幕 上 工作 的 响应 式 设计 时 ， 需 要 考虑 的 一 件 事 是 ， 任 何 给 定 的 用 
户 可 能 在 不 同 的 时 间 使 用 不 同 的 设备 访问 网 站 。 














虽然 你 可 以 用 响应 式 设 计 改 变 网 站 在 不 同 屏幕 宽度 下 的 显示 布局 ， 但 要 确保 哪怕 是 在 不 同 
尺寸 的 屏幕 上 ， 用 户 的 体验 应 该 是 相同 的 。 用 户 应 能 在 不 同 的 设备 上 访问 网 站 ， 而 且 要 让 
用 户 确信 访问 的 是 同一 个 网 站 。 不 管 他 们 使 用 的 是 什么 设备 ， 配 色 方案 、 图 像 和 字体 都 应 
该 是 相似 的 。 


























像 导 航 之 类 的 物件 可 能 根据 屏幕 尺寸 的 不 同 有 很 大 的 变化 ， 但 可 用 的 选项 应 该 是 相同 ， 在 
导航 中 应 使 用 相同 的 信息 架构 组 织 它 们 。 


8.2 设备 无 关 的 设计 


在 开始 设计 响应 式 网 站 之 前 ， 你 应 该 知道 网 站 会 在 什么 地 方 被 浏览 。 答 案 是 : 任何 地 方 。 




















现在 有 数量 令 人 难以 置信 的 设备 可 用 ， 即 使 我 们 开始 讨论 所 有 这 些 设 备 ， 我 们 也 不 知道 接 
下 来 又 会 发 明 什 么 新 设备 。 


它们 有 什么 共同 之 处 ? 


























注 1: 完整 报告 请 查看 MaeveDuggan and Aaron Smith 发 表 的 “Cell Internet Use 2013”, 皮 尤 互联 网 研究 项 目 ， 
2013 4E 9 H 16 日 (http://www.pewinternet.org/2013/09/16/cell-internet-use-2013/) 。 
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它们 中 的 大 多 数 拥有 一 个 屏幕 ， 但 并 非 全 都 这 样 。 一 些 失明 或 视力 受 损 的 用 户 将 使 用 屏幕 
阅读 器 上 网 。 具 有 互联 网 连接 功能 的 汽车 可 以 为 你 阅读 电子 邮件 或 新 闻 提 要 ， 也 许 用 不 了 
多 入 就 可 以 在 汽车 上 通过 听 来 上 网 冲浪 了 。 


人 们 使 用 各 种 各 样 的 输入 设备 来 访问 网 站 。 在 桌面 电脑 上 ， 你 可 能 会 使 用 键盘 和 鼠标 。 在 
笔记 本 电脑 上 ， 忌 标 被 触 控 板 禁 代 。 在 手机 或 平板 电脑 上 ， 你 使 用 触摸 屏 。 在 旧 和 手机 上 ， 
你 可 能 会 使 用 方向 按键 。 


这 里 的 重点 是 ， 你 不 能 只 为 特定 类 型 的 设备 进行 设计 ， 因 为 有 那么 多 不 同类 型 的 设备 被 创 
造 出 来 ， 远 远 超 出 了 我 们 对 一 个 标准 的 移动 设备 的 认 知 ， 其 至 没有 办 法 预测 又 会 有 什么 设 
备 将 被 发 明 出 来 ， 其 可 能 甚至 会 是 我 们 大 多 数 人 无 法 想象 的 。 

设备 无 关 的 设计 (device-agnostic design) 意味 着 创建 一 个 不 管 是 在 什么 类 型 的 设备 上 都 能 
工作 的 设计 。 你 不 是 为 移动 设备 进行 设计 ， 也 不 是 为 桌面 电脑 进行 设计 ， 你 是 在 为 网 页 进 
行 设计 ， 无 论 在 什么 地 方 在 查看 它们 。 


8.3 专注 于 移动 优先 

我 们 在 前 一 章 谈 到 了 移动 优先 (mobile first)， 其 理念 就 是 创建 一 个 这 样 的 设计 ， 优 先 考 虑 
使 用 移动 设备 的 用 户 以 及 这 些 用 户 如 何 与 网 站 进行 交互 。 

当 你 创建 一 个 设备 无 关 的 设计 时 ， 这 是 最 好 的 开始 方法 ， 不 是 因为 移动 设备 上 的 用 户 体验 
比 桌面 电脑 或 其 他 设备 的 用 户 体验 更 重要 ， 而 是 因为 移动 设备 有 更 多 的 限制 因素 ， 在 屏幕 
空间 有 限 以 及 对 用 户 交 互 方式 (触摸 ) 还 不 太 熟 悉 的 情况 下 更 难以 创造 好 的 用 户 体 验 。 






























































































































































我 们 已 经 在 第 5 章 中 谈 到 了 优先 为 小 屏幕 设计 。 但 移动 优先 的 理念 超出 它 ， 它 聚焦 于 用 户 
如 何 与 网 站 和 设备 交互 。 触 摸 是 最 大 的 复杂 因素 。 一 个 可 以 很 容易 使 用 鼠标 导航 的 布局 可 
能 在 你 用 你 的 大 手指 在 一 小 块 玻璃 上 戳 来 发 去 时 会 变 得 很 难 用 。 


在 本 章 后 面部 分 ， 我 们 将 讨论 一 些 特定 的 移动 设备 问题 ， 比 如 触摸 屏 和 设备 性 能 。 而 在 第 
11 章 中 ， 我 们 将 谈 及 性 能 ， 它 是 另 一 个 对 手机 有 普 适 性 的 问题 ， 性 能 的 改善 将 普 惠 于 所 有 
的 设备 。 


8.4 尽 你 所 能 


响应 式 设 计 不 是 一 个 非 此 即 彼 的 方法 。 虽 然 理 想 情 况 下 你 将 从 零 开 始 为 每 一 个 项 目 创建 一 
个 轿 新 的 完全 的 响应 式 网 站 ， 但 在 现实 中 你 经 常 是 要 使 用 现 有 的 网 站 ， 对 其 进行 修改 或 重 
新 设计 使 之 成 为 响应 式 网 站 。 


如 有 果 你 正在 使 用 现 有 网 站 遗留 下 来 的 代码 ， 或 者 资源 有 限 ， 不 一 定 能 使 网 站 是 完全 响应 式 
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的 。 但 部 分 响应 式 网 站 也 要 优 于 完全 不 具 响 应 性 的 网 站 。 


例如 ， 亚 马 逊 网 站 不 是 完全 响应 式 的 ， 只 有 一 些 元 素 具 有 响应 性 ， 只 出 现在 更 宽 的 屏幕 中 
《有 一 个 单独 的 移动 版 网 站 用 于 手机 大 小 的 屏幕 )。 


页 面 元 素 有 一 个 固定 的 宽度 ， 如 图 8-2 所 示 ， 页 面 的 右边 在 较 窗 的 浏览 器 窗口 中 被 切断 。 
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图 8-2: 亚马逊 网 站 页 面 的 右边 在 较 窒 的 浏览 器 窗口 中 被 切断 


但 随 着 视 口 宽度 的 增加 ， 如 图 8-3 所 示 ， 元 素 之 间 的 空白 变 大 ， 这 样 页 面 能 够 继续 填 满 整 
个 屏幕 的 宽度 。 
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图 8-3: 在 较 宽 的 屏幕 上 ， 元 素 间 的 空白 变 大 


在 视 口 宽度 足够 宽 时 ， 因 为 有 足够 的 空间 ， 子 导航 菜单 “Shop by Department” 从 下 拉链 接 
变 成 了 完全 可 见 的 导航 栏 ， 如 图 8-4 所 示 。 视 口 变 得 更 宽 时 ， 空 白 进 一 步 扩大 以 填充 页 面 ， 
如 图 8-5 所 示 。 
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图 8-4: 在 足够 宽 的 视 口 中 , "Shop by Department 菜单 从 下 拉链 接 变 成 一 个 完全 可 见 的 导航 栏 
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图 8-5. 空白 进一步 扩大 以 填充 页 面 


在 平板 电脑 上 ， 桌 面 网 站 会 简单 地 缩小 来 准确 地 适 配 窗口 宽度 (如同 所 有 固定 宽度 网 站 所 
默认 的 那样 )， 如 图 8-6 所 示 ， 尽 管 这 意味 着 文本 会 相当 小 ， 在 竖 排 视图 中 难以 阅读 。 
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图 8-6: 在 平板 电脑 中 ， 桌 面 版 网 站 缩小 以 适 配 视 口 宽 度 
这 不 是 一 个 响应 式 网 站 ， 但 它 在 一 定 程 度 上 能 适应 不 同 的 屏幕 尺寸 。 这 是 具有 稍 许 啊 应 式 
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性 也 要 好 过 没有 响应 性 的 例子 。 


8.5 设备 类 型 
有 大 量 不 同类 型 的 设备 可 以 上 网 ， 从 我 们 熟悉 的 iPhone 到 所 有 尺寸 的 平板 电脑 、 笔 记 本 电 
脑 、 台 式 电 脑 、 游 戏 机 ， 甚 至 冰箱 。 


























我 们 将 简略 地 重 温 这 些 设备 类 型 以 及 它们 之 间 的 差异 性 ， 然 后 在 本 章 的 剩 下 部 分 谈论 在 设 
计 能 于 所 有 类 型 的 设备 和 所 有 可 能 的 屏幕 尺寸 上 工作 的 响应 式 网 站 时 ， 需 要 考虑 些 什么 。 


























8.5.1 手机 

早 在 20 世纪 90 年 代 中 期 手机 就 可 用 来 上 网 ， 尽 管 只 能 浏览 基于 文本 的 网 页 ， 这 与 我 们 
今天 所 享有 的 丰富 内 容 相 去 其 了 远 。 直 到 2000 年 前 后 ， 手 机 上 网 才 变 得 越 来 越 普 遍 ， 虽 然 
还 只 是 个 功能 有 限 的 版 本 。 


























智能 手机 ， 比 如 iPhone， 实 际 上 是 一 台 微 型 电脑 ， 具 有 移动 操作 系统 ， 人 允许 用 户 安装 应 用 





另 一 方面 ， 功 能 手机 (feature phone) 则 不 太 像 电脑 ， 功 能 手机 在 iPhone 问世 之 前 被 人 们 

量 使 用 。 它 们 可 以 上 网 ， 但 当 你 查看 网 站 时 ， 网 站 看 上 去 跟 它 在 显示 器 屏幕 上 的 样子 一 
点 也 不 像 。 功 能 手机 比 智能 手机 的 功能 要 少 得 多 ， 通 第 也 不 配备 触摸 屏 ， 你 可 能 不 得 不 使 
用 如 图 8-7 所 示 的 小 小 按键 来 在 网 站 中 导航 。 

















8-7: 功能 手机 (图 片 来 源 : Rodrigo Senna, http://www.flickr.com/photos/negativz/38422354/) 
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但 功能 手机 并 没有 完全 被 智能 手机 所 取代 。 在 美国 ，589 的 成 年 人 拥有 智能 手机 ，329 的 成 
年 人 拥有 功能 手机 。 在 一 些 国家 智能 手机 拥有 更 高 的 渗透 率 ， 比 如 阿 联 戎 和 韩国 ， 都 在 73% 
左右 ， 而 另 一 些 国 家 ， 比 如 撒哈拉 以 南 的 非洲 国家 ， 功 能 手机 的 使 用 率 则 要 高 于 智能 手机 。” 


响应 式 设 计 的 一 部 分 是 确保 网 站 能 在 任何 一 个 设备 上 工作 ， 不 仅仅 是 使 之 适 配 屏幕 尺寸 。 
如 我 们 在 第 3 章 中 谈 到 的 ， 从 一 个 好 的 HTML 架构 开始 ， 并 以 渐进 增强 的 方式 为 可 支持 的 
设备 添加 CSS 和 JavaScript， 这 样 可 以 确保 网 站 在 决 大 多 数 只 具 基 本 功能 的 手机 上 也 是 可 
用 的 。 


如 果 网 站 有 很 多 复杂 的 交互 ， 响 应 式 设计 可 能 无 法 使 整个 网 站 都 能 在 所 有 设备 上 (包括 最 
老 的 浏览 器 和 设备 ) 良好 工作 ， 但 尽 你 所 能 让 其 能 在 尽 可 能 多 的 设备 上 工作 。 




































































例如 ， 也 许 你 无 法 使 餐厅 网 站 的 在 线 下 单 功能 可 以 工作 于 最 老 的 手机 ， 但 你 应 该 使 包含 餐 
厅 地 址 和 电话 号 码 的 页 面 能 够 在 几乎 所 有 的 设备 上 工作 ， 这 并 不 需要 费 什 么 劲 。 








8.5.2 平板 电脑 

平板 电脑 近年 来 已 经 变 得 越 来 越 普及 。 它 们 存在 多 年 ， 但 直到 2010 年 iPad 的 发 布 才 变 得 
流行 起 来 。iPad 是 迄今 为 上 最 受 欢 迎 的 平板 电脑 ， 其 他 品牌 比如 亚马逊 的 Kindle Fire 被 远 
远 地 抛 在 了 后 面 。 


平板 电脑 非常 类 似 于 现代 的 智能 手机 ， 通 常 使 用 相同 的 操作 系统 ， 比 如 iOS 和 Android, 
允许 安装 应 用 程序 。 






































许多 平板 电脑 只 能 通过 WiFi 上 网 ， 而 不 是 通过 蜂窝 移动 网 络 (cellular network) ， 所 以 在 
技术 上 它们 不 被 列 为 移动 设备 。 但 这 其 实 无 关 紧 要 。 移 动 设备 与 非 移动 设备 的 分 界线 已 经 
变 得 很 模糊 ， 坚 持 把 每 件 设备 按 移动 与 非 移动 来 归 类 已 不 再 有 用 。 这 更 像 是 一 个 模糊 的 连 
续 统一 体 ， 一 端 是 手机 (通常 在 移动 )， 一 端 是 台式 电脑 (通常 不 移动 ) 。 


电子 书 阅读 器 是 主要 用 于 阅读 下 载 的 电子 书籍 的 设备 ， 但 它们 中 的 许多 现在 都 包含 有 网 页 
浏览 器 ， 并 更 多 的 是 作为 平板 电脑 销售 (比如 Kindle Fire)。 某 些 电 子 书 阅读 器 ， 比 如 更 基 
础 版 的 Kindle， 内 置 的 浏览 器 功能 有 限 ， 但 使 用 电子 墨水 屏 代 替 传 统 的 屏幕 ， 所 有 的 内 容 
都 以 灰 度 显示 。 

















8.5.3 ”其 他 设 
现在 很 多 游戏 机 内 置 有 浏览 器 ， 只 要 将 屏幕 连 上 游戏 机 就 能 上 网 。 








注 2: 完整 报告 请 查看 Susannah Fox 和 Lee Rainie 发 表 的 “The Web at 25 in the U.S.”, 皮 尤 互联 网 研究 项 目 ， 
2014 年 2 月 27 日 (http//www.pewinternet.org/2014/02/27/the-web-at-25-in-the-u-s/, 
注 3: 更 多 信息 请 查看 Google 的 Our Mobile Planet (http;//think.withgoogle.com/mobileplanet/en/) 。 
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有 些 游戏 机 只 有 非常 简单 的 浏览 器 ， 这 意味 着 你 在 屏幕 上 看 到 的 内 容 可 能 并 不 完全 符合 
设计 师 的 预期 。 但 与 功能 手机 一 样 ， 只 要 网 站 始 于 良好 的 HTML 结构 ， 然 后 添加 CSS 和 
JavaScript 做 渐进 增强 ， 它 在 这 些 设 备 上 应 该 也 是 可 用 的 。 





























你 永远 不 知道 在 哪 又 会 冒 出 一 个 浏览 器 。 例 如 ， 上 有 具有 WiFi 功能 的 冰箱 已 经 存在 数 年 了 
《有 点 像 冰箱 前 面 认 入 了 一 个 小 平板 电脑 ) 。 目 前 ， 它 们 所 搭载 的 操作 系统 功能 有 限 ， 只 支 
持 特 定 的 应 用 程序 ， 但 我 想 不 要 太 久 ， 在 厨房 中 ， 你 会 拥有 一 个 完整 功能 的 网 页 浏览 器 。 


现在 还 有 手表 中 先入 的 浏览 器 ， 汽 车 中 的 浏览 器 ， 再 加 上 谷歌 眼镜 ， 它 把 浏览 器 直接 放 到 
你 眼前 。 这 些 浏览 器 都 有 非常 不 同 的 界面 ， 你 无 法 预见 未 来 几 年 会 出 现 哪些 可 能 的 设备 。 
但 幸运 的 是 ， 这 正 是 响应 式 设计 的 用 武之 地 ， 你 的 目标 是 设计 一 个 未 来 友好 型 的 网 站 ， 能 
够 工作 在 任意 尺寸 的 屏幕 和 任何 设备 之 上 ， 无 关 性 能 。 





























8.5.4 台式 电脑 与 笔记 本 电脑 
直到 几 年 前 ， 我 们 还 仅 限于 用 台式 机 或 笔记 本 电脑 上 网 。 这 可 能 是 我 们 所 有 人 最 熟悉 的 
配置 : 


。 大 屏幕 ， 

。 使 用 键盘 或 鼠标 、 触 控 板 或 轨迹 球 输入 

。 台式 机 ， 在 桌 上 使 用 ， 通 常 是 坐 在 它 前 面 ， 不 太 能 改变 位 置 ， 
。 笔记 本 电脑 ， 可 在 桌 上 使 用 ， 或 坐 着 / 躺 着 时 放 在 膝盖 上 使 用 ，; 
。 差不多 总 是 使 用 有 线 连 接 或 WiFi; 


我 们 常常 认为 这 些 设 备 拥 有 高 速 连接 ， 但 这 并 不 一 定 是 真 的 。 许 多 家 庭 的 网 络 连 接 并 没有 
那么 快 ， 此 外 通常 在 酒店 、 咖 啡 馆 或 者 其 他 地 方 使 用 笔记 本 电脑 时 WiFi 也 很 慢 。 有 些 人 
在 农村 地 区 没有 宽带 可 用 ， 连 接 的 是 卫星 互联 网 。 


8.6 ”触摸 
除了 屏幕 尺寸 ， 智 能 手机 与 传统 电脑 的 另外 一 个 关键 区 别 是 输入 方式 。 


台式 机 和 笔记 本 电脑 习惯 上 使 用 键盘 结合 定位 设备 〈 比 如 鼠标 或 触摸 板 ) 作为 其 输入 方 
式 ， 我 们 能 够 很 容易 地 设计 出 支持 这 些 设备 的 网 站 。 支 持 触摸 的 网 站 则 更 难以 设计 ， 要 确 
保良 好 的 用 户 体验 必须 付出 更 多 的 努力 。 


你 可 以 对 网 站 进行 修改 使 之 能 更 好 地 工作 于 触摸 屏 ， 而 且 这 些 改变 并 不 会 降低 非 触摸 屏 用 
户 的 体验 。 


但 不 要 认为 你 只 需要 考虑 手机 和 平板 电脑 的 触摸 问题 。 现 在 ， 许 多 投入 市 场 的 台式 电脑 也 
配备 了 触摸 屏 显 示 器 ( 连 我 妈 都 在 QVC 有 线 购物 频道 上 买 了 一 台 )。 所 以 最 好 假定 所 有 尺 
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十 的 屏幕 都 是 可 触摸 的 。 


如 有 果 你 的 网 站 是 为 触摸 屏 而 设计 的 ， 它 必然 也 能 在 使 用 鼠标 的 情况 下 有 效 地 工作 ， 但 反 过 
来 情况 就 不 一 样 了 。 








[小 贴 士 ] 

设计 出 良好 的 触摸 用 户 体验 有 一 定 难度 。 如 果 你 想 对 此 领域 进行 深入 研究 ， 可 参阅 Josh Clark 
的 《触动 人 心 : 设计 优秀 的 iPhone 应 用 》( http://shop.oreilly.com/product/0636920001133.do )。 
尽管 此 书 是 关于 应 用 程序 设计 的 ， 但 大 多 数 观念 与 网 站 设计 是 共通 的 。 


8.6.1 电容 式 触摸 


Á iPhone 出 现 以 来 ， 管 能 手机 上 的 主要 输入 方式 一 直 是 电容 式 触 模 屏 。 


电容 式 触摸 屏 意味 着 屏幕 是 通过 测量 物体 (比如 手指 尖 ) 触及 屏幕 所 传导 的 电荷 量 来 工作 
的 。 人 体 导 电 ， 但 并 不 是 所 有 的 物体 都 行 ， 这 就 是 用 钢笔 或 带 手套 的 手指 触摸 智能 手机 屏 
幕 没有 效果 的 原因 。 不 过 ， 可 以 通过 购买 由 导电 材料 制 成 的 特殊 手写 笔 , 其 至 是 指 尖 部 位 
是 由 导电 纤维 织 成 的 手套 来 解决 这 个 问题 。 


老式 设备 有 时 用 的 是 电阻 式 触摸 屏 ， 其 有 两 个 薄膜 层 ， 当 用 户 在 外 表面 用 指 尖 或 手写 笔 按 
压 时 薄膜 层 发 生 接触 ， 电 阻 屏 就 能 够 确定 压力 的 精确 位 置 。 这 种 类 型 的 屏幕 有 一 个 缺点 
是 ， 需 要 施 以 一 定量 的 压力 ， 如 果 触 按 力量 太 轻 ， 屏 幕 通常 没有 反应 。 也 正 是 由 于 需要 施 
加 一 定 压力 ， 电 阻 屏 也 更 容易 损坏 。 


8.6. ”多 点 触摸 

虽然 iPhone 于 2007 年 推出 的 时 候 具 有 触摸 界面 的 手机 已 存在 多 年 ， 但 iPhone 是 第 一 部 具 
有 多 点 触 控 界面 的 智能 手机 ， 基 允许 屏幕 可 以 同时 识别 多 个 触 点 ， 这 使 得 人 们 可 与 屏幕 做 
更 加 复杂 的 交互 ， 比 如 捏合 缩放 (pinch-to-zoom) 动作 。 













































































8.6.3 手势 
现代 智能 手机 将 手势 作为 用 户 与 屏幕 内 容 交 互 的 一 种 方式 ， 这 给 予 了 用 户 一 种 “隐藏 ”的 
方法 来 使 用 界面 ， 从 而 减少 了 控件 所 要 占用 的 宝贵 的 屏幕 空间 。 


捏合 缩放 手势 是 一 个 最 常见 的 手势 gesture)， 人 允许 以 一 种 直观 的 方式 来 放大 或 缩小 地 图 之 
类 的 事物 。 如 果 是 在 笔记 本 或 台式 机 上 查看 相同 的 地 图 ， 你 会 看 到 一 个 具有 加 、 减 按钮 的 
请 块 占据 了 一 部 分 的 屏幕 。 


有 些 手势 ， 比 如 放大 和 缩小 网 页 ， 是 内 置 于 浏览 如 或 操作 系统 中 的 。 其 他 的 手势 ， 比 如 在 
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幻灯 片 中 向 两 侧 请 动 屏幕 以 切换 图 像 的 手势 ， 则 必须 通过 添加 JavaScript 才能 实现 。 


虽然 你 可 以 跳 过 这 一 步 ， 要求 用 户 通过 轻 触 或 点 击 第 头 来 在 幻灯 片 中 切换 ， 但 加 上 手势 支 
持 可 以 使 网 站 更 容易 在 触摸 屏 上 使 用 。 为 支持 手势 的 设备 添加 额外 的 手势 ， 能 增强 用 户 体 
验 ， 这 是 响应 式 网 页 设计 的 一 个 关键 部 分 。 














AU JI avaScript Jf PF T Hostess nis Béfr2g. kkdm TouchS wipe (http://labs.rampinteractive. 
co.uk/touchSwipe/demos/) 或 Swipe (https://github.com/thebird/Swipe) 。 


8.6.4 ” JavaScript 事件 


触摸 事件 (touch event) 是 JavaScript 中 的 一 个 用 语 ， 用 来 描述 用 户 与 屏幕 做 出 的 交互 ， 是 
简单 的 触 按 还 是 多 个 指头 移动 。 有 三 个 基本 的 触摸 事件 : touchstart, touchmove 和 
touchend， 可 用 于 定义 几乎 所 有 的 触摸 交互 行为 。 


此 外 ， 触 屏 设备 能 够 识别 为 鼠标 设计 的 JavaScript 事件 ， 比 如 click (点 击 ) 














lin] 


EI. 


1. 悬 停 
在 触摸 屏 上 处 理 hover GEER) FAARF, REA, MANTEREET EEIE 
mcs 


甚 停 在 网 站 上 多 用 于 通过 CSS 改变 元 素 的 可 见 性 (隐藏 或 显示 )， 比 如 当 你 的 鼠标 光标 悬 
停 在 菜单 栏 的 一 个 链接 上 时 显现 一 个 下 拉 菜 单 。 


大 多 数 触摸 屏 通 过 将 元 素 的 行为 改变 成 双 触 击 自动 适应 此 事件 。 这 意味 着 第 一 次 在 元 素 上 
触 击 视 作 一 个 悬 停 动作 ， 并 改变 元 素 的 可 见 性 ， 而 第 二 次 触 击 则 选中 链接 。 不 过 ， 这 是 种 
笨拙 的 实现 方式 ， 应 该 避免 使 用 hover, 


当然 ， 你 可 以 使 用 媒体 查询 使 得 较 小 的 屏幕 拥有 不 同类 型 的 导航 ( 见 第 10 3€), 但 现在 很 
多 台式 电脑 也 配备 有 触摸 屏 ， 所 以 你 需要 假设 任何 尺寸 的 屏幕 都 可 能 是 触摸 屏 。 



































2. 触摸 延迟 
你 可 能 已 经 注意 到 ， 同 样 是 触摸 ， 移 动 应 用 程序 的 响应 速度 有 时 似乎 要 比 在 手机 中 浏览 网 
PAE a ELZ. FRULA RE A K b CE FA E A EA JavaScript 引擎 在 触摸 设 
备 上 特殊 的 工作 方式 。 




















手机 浏览 器 中 的 JavaScript 引擎 会 尽力 复制 鼠标 事件 ， 将 onclick (鼠标 点 击 ) 事件 融合 
到 touch (触摸 ) 事件 中 。 因 此 如 果 剖 览 器 监听 一 个 元 素 上 的 onclick 事件 ， 它 知道 在 
触摸 屏 上 一 次 触 击 即 一 次 点 击 ， 但 又 有 点 不 同 ， 训 览 器 会 等 待 并 查看 你 是 否 会 再 次 触 击 ， 
从 而 形成 两 次 触 击 (双击 ， 将 放大 网 页 )。 也 就 是 说 ， 在 你 第 一 次 触 击 后 ， 浏 览 器 会 等 待 
300 ms (0.3 秒 ) ， 在 确保 不 是 双击 后 ， 才 形成 鼠标 单 击 (click) 事件 。 
































三 分 之 一 秒 看 似 不 多 ， 但 对 于 用 户 ， 有 或 没有 300 ms 的 延迟 ， 差 别 还 是 很 明显 的 ， 因 为 
这 意味 着 他 们 在 触 击 目标 时 事情 似乎 并 没有 “马上 ”发 生 。 














还 好 ， 至 少 有 一 个 浏览 器 厂商 意识 到 这 个 问题 并 开始 修复 它 。 新 的 beta 版 的 Chrome for 
Android 浏览 器 移 除 了 300 毫秒 的 延迟 ， 但 只 对 视 口 (viewport) 元 素 标记 的 content 属 
性 设置 为 width=device-width («meta name-"viewport" content="width=device- 
width">) 的 网 站 , 即 响应 式 网 站 有 效 。 当 然 用 户 也 无 法 再 通过 双击 来 放大 网 页 , 但 缩放 在 
响应 式 网 站 中 并 不 是 那么 必需 ， 况 且 用 户 仍 可 以 捏合 手势 来 进行 缩放 。 








目前 还 不 清楚 其 他 浏览 器 厂商 是 否 会 在 这 方面 跟 进 ， 不 过 在 此 期 间 可 以 用 JavaScript 插 
件 来 移 除 网 站 上 的 300 毫秒 延迟 。 查 看 FT Labs 的 FastClick (https://github.com/ftlabs/ 
fastclick) 或 Ben Howdle 的 Touche.js (http://benhowdle.im/touche/)。 





8.6.5 触摸 目标 大 小 
对 于 使 用 触摸 屏 访问 网 站 的 用 户 ， 最 大 的 一 个 可 用 性 问题 是 触摸 目标 的 大 小 〈( 即 ， 链 接 或 
其 他 可 通过 轻 触 屏幕 来 选取 的 元 素 的 大 小 ) 。 


当 使 用 鼠标 点 击 链接 时 这 不 是 那么 重要 ， 因 为 用 户 (对 于 大 多 数 用 户 来 说 ) 能 很 容易 精准 
地 移动 光标 至 正确 的 位 置 并 点 击 链接 或 其 他 元 素 。 但 对 于 触摸 屏幕 的 用 户 ， 要 知道 手指 比 
光标 大 得 多 ， 且 如 果 屏 幕 上 触摸 目标 确实 很 小 的 话 ， 很 难 触及 正确 的 位 置 。 











如 果 一 个 目标 独占 一 块 区 域 ， 问 题 不 大 ， 但 如 果 目 标 是 非常 紧密 地 挨 在 一 起 ， 一 不 小 心 很 
容易 误 触 其 他 目标 ， 把 你 带 到 你 不 想 访问 的 页 面 ， 或 执行 一 个 你 不 想 执行 的 动作 。 





你 会 发 现在 使 用 触摸 屏 时 ， 用 户 实际 上 倾向 于 使 用 他 们 的 手指 肚 (指纹 所 在 处 )， 而 不 是 
手指 尖 (手指 最 前 端 )。 因 人 而 异 ， 这 实际 上 可 以 是 相当 宽 的 区 域 。 











如 果 用 户 试图 触及 一 个 非常 小 的 目标 ， 有 时 可 能 用 指 尖 而 不 是 指 肚 会 更 准确 些 ， 但 这 会 降 
低 用 户 的 操作 速度 并 增加 操作 难度 ， 这 不 会 是 你 想 要 的 结果 。 














根据 麻 省 理工 学 院 触 摸 实验 室 (MIT Touch Lab) 的 一 项 研究 ， 食 指 的 平均 宽度 是 1.6~2cm 
(0.6~0.8 英寸 )， 转 换 成 像素 大 慨 是 45-57 像素 。 幸 运 的 是 ， 智 能 手机 非常 的 聪明 ， 当 它 收 
到 触摸 事件 时 ， 即 使 你 的 手指 在 屏幕 上 触摸 目标 时 可 能 有 些许 误差 ， 它 通常 可 以 判断 出 你 
意图 触及 的 目标 。 但 如 果 目 标 太 小 ， 成 功 的 机 率 将 会 下 降 。 


手机 厂商 实际 上 会 有 相关 的 设计 指南 ， 并 在 其 中 给 出 一 个 元 素 应 该 多 大 的 建议 ， 从 而 使 用 
户 可 以 在 触摸 屏 上 很 容易 地 选择 触摸 目标 。 苹 果 的 iPhone 人 机 界面 指南 建议 的 触摸 目标 的 
大 小 至 少 是 44 像素 x 44 像素 。 微 软 Windows Phone 的 建议 是 34 像素 宽 ， 最 低 不 少 于 26 
像素 。 诺 基 亚 建议 触摸 目标 应 该 至 少 是 28 像素 x 28 像素 。 



































这 么 多 不 同 的 建议 ， 用 哪个 好 呢 ? 如 果 触 摸 目 标 是 一 个 紧 挨 着 一 个 ， 我 建议 在 可 能 的 情况 
下 应 使 它们 至 少 是 44 像素 x 44 像素 。 


当 你 在 各 种 移动 设备 上 测试 你 的 网 站 时 ， 务 必 检 查 链 接 在 触摸 屏 上 是 不 是 容易 选择 。 记 
住 ， 别 人 可 能 不 如 你 的 手指 纤细 灵活 ， 某 些 人 的 手指 会 更 粗大 些 ， 年 长 用 户 可 能 更 难以 触 
及 屏幕 上 精确 的 点 。 


加 大 触摸 目标 

你 可 以 使 用 CSS 来 增加 触摸 目标 的 大 小 。 方 法 之 一 是 确保 链接 周围 的 空白 是 由 内 边 距 而 不 
是 外 边 距 产生 的 。 你 需要 回顾 下 在 第 3 章 中 学 过 的 盒 模型 ， 其 解释 了 内 边 距 与 外 边 距 之 间 
的 区 别 。 


考虑 一 下 图 8-8 中 的 这 个 链接 列表 。 链 接 挨 得 很 近 ， 取 决 于 文字 的 大 小 ， 可 能 难以 用 手指 
正确 触 碰 。 我 用 线 勾 勒 出 了 每 个 链接 ， 这 样 你 可 以 看 到 哪 一 部 分 是 可 点 击 / 触 碰 区 域 。 




















8-8: 没有 应 用 样式 的 列表 中 的 链接 挨 得 非常 紧密 


我 们 对 此 可 做 哪些 改进 呢 ? 一 开始 ， 你 可 以 用 display: block 把 链接 变 成 块 级 元 素 ， 
这 将 使 <a> 元 素 框 (盒子 ) 延伸 至 整个 包含 元 素 的 宽度 ， 如 图 8-9 所 示 ， 而 不 是 停止 在 最 
后 一 个 字符 的 末端 : 














ul a ( display: block; ) 





» Lorem ipsum dolor sit amet. 


» Lorem ipsum dolor sit amet, consectetur 








8-9: 把 链接 由 行内 元 素 变 成 块 级 元 素 ， 使 得 触摸 目标 框 扩 展 到 整个 包含 元 素 的 宽度 


要 加 大 可 触 区 域 ， 你 也 可 以 加 大 每 个 <a> 元 素 的 内 边 距 (不 是 外 边 距 )， 你 可 以 任意 选择 
在 每 个 方向 如 何 加 大 触摸 目标 的 大 小 ， 如 图 8-10 所 示 : 

















ula ( display: block; padding: 3px 5px; } 
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. Lorem ipsum dolor sit amet 


. | Lorem ipsum dolor sit amet, consectetur 








adipiscing elit 


- Lorem ipsum. 





& 8-10: 添加 内 边 距 可 在 任 一 或 所 有 方向 上 加 大 触摸 目标 的 大 小 


不 要 对 «lis 元 素 应 用 内 边 距 样式 ， 否 则 将 留 出 空挡 ， 如 此 造成 的 链接 间 的 空 档 是 不 可 触 
及 的 ， 如 图 8-11 所 示 : 





li ( padding: 3px 5px; } 


. Lorem ipsum dolor sit amet. 


. rem ipsum dolor sit amet, consectetu 
adipiscing elit. 


。 LLorem ipsum. 


图 8-11: 如 果 你 在 列表 项 上 使 用 内 边 距 ， 链 接 之 间 留 出 了 的 空 档 ， 并 使 触摸 目标 变 得 更 小 


你 应 该 充分 利用 所 有 可 用 的 空间 ， 不 需要 留 出 空 档 来 分 隔 链接 。 鼠 标 用 户 会 直接 点 击 链 
接 ， 因 此 不 用 担心 会 产生 混淆 。 


























对 于 文本 块 (比如 段落 ) 中 的 链接 ， 则 有 点 麻烦 。 通 过 确保 各 行 有 足够 的 高 度 ， 可 以 使 链 
接 相距 得 更 远 一 点 (我们 将 在 第 9 章 看 看 如 何 用 CSS 的 line-height 属性 来 做 到 这 一 
点 )。 尽 量 不 要 使 相 邻 的 单词 是 不 同 的 链接 。 那 样 不 仅 使 它们 更 难点 击 ,， 而 且 在 触 模 屏 上 
用 户 可 能 无 法 分 辨 存在 有 多 个 链接 ， 因 为 他 们 不 能 够 像 使 用 鼠标 那样 把 鼠标 光标 悬 停 在 链 
接 上 来 查看 链接 的 目标 指向 。 


另外 ， 请 记 住 在 最 小 的 屏幕 中 这 么 做 可 能 会 相当 的 糠 手 ， 因 为 屏幕 太 小 没有 多 少 可 用 的 空 
间 。 如 果 你 想 使 触摸 目标 在 小 屏幕 上 更 小 一 些 ， 可 以 使 用 媒体 查询 来 改变 不 同 屏 幕 尺 寸 中 
触摸 目标 的 大 小 。 在 前 面 的 例子 中 ， 内 边 距 分 别 是 3 像素 和 5 像素 ， 这 并 不 适合 于 小 屏 
幕 ， 你 可 以 使 用 媒体 查询 为 窗 屏 设置 稍微 小 点 的 内 边 距 ， 而 对 于 平板 尺寸 或 更 宽 的 屏幕 则 
设置 更 大 些 的 内 边 距 。 

















8.6.6 “导航 位 置 
虽然 在 网 站 和 桌面 应 用 程序 上 导航 自然 而 然 地 演变 成 出 现在 屏幕 的 顶部 ， 通 常 与 首页 按钮 
或 搜索 框 等 关键 元 素 一 道 放 在 顶部 的 角 上 ， 但 这 种 布局 实际 上 仅 在 使 用 鼠标 时 是 最 优 的 。 
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对 于 触摸 屏 ， 我 们 需要 进行 全 新 的 考虑 。 


其 中 的 区 别 于 在 智能 手机 上 使 用 的 应 用 程序 ， 基 导航 通常 出 现在 屏幕 的 底部 ， 使 得 你 能 够 
更 方便 地 用 拇指 触 击 这 些 按钮 ， 如 果 你 是 单 手 担 持 手 机 。 


不 仅仅 是 手机 ， 对 于 几乎 所 有 的 触摸 屏 ， 离 手 最 近 的 屏幕 部 分 最 容易 触摸 到 的 ， 即 使 在 桌 
下 触摸 屏 显示 器 上 ， 用 户 触 磁 靠 近 屏 幕 底部 的 元 素 也 是 最 容易 和 最 轻松 的 。 

































































把 控件 放置 到 屏幕 的 底部 并 不 仅仅 是 使 他 们 更 容易 触及 ， 还 有 一 个 额外 的 效果 : 你 的 手指 
(或 手臂 ， 对 于 桌面 触 屏 显示 器 来 说 ) 不 会 挡住 屏幕 的 其 他 部 位 ， 因 此 你 仍 能 看 到 屏幕 上 
的 内 容 。 

如 何 设 计 导 航 的 位 置 是 一 个 难题 ， 所 以 我 们 在 本 书 中 着 墨 不 多 。 在 第 10 章 中 ， 我 们 会 看 


到 一 个 网 站 导航 在 屏幕 的 底部 的 例子 。 尽 管 这 种 对 标准 用 户 界面 的 调整 并 不 常用 ， 但 随 着 
Web 的 使 用 越 来 越 远离 传统 的 键盘 和 鼠标 ， 这 种 做 法 一 定 会 变 得 愈加 普遍 





















































如 果 你 想 了 解 更 多 关于 为 触摸 屏 优 化 导航 的 理念 ， 查 看 Josh Clark 的 博客 文章 “New Rule: 
Every Desktop Design Has To Go Finger-Friendly" (http://globalmoxie.com/blog/desktop- 
touch-design.shtml) 或 Luke Wroblewski 的 “Responsive Navigation: Optimizing for Touch 
Across Devices" (http://www.lukew.com/ff/entry.asp?1649) , 


8.7 屏幕 尺寸 
在 做 响应 式 设计 时 ， 一 个 主要 的 考虑 是 确保 网 站 在 任意 尺寸 的 屏幕 上 都 能 被 浏览 。 


过 去 ， 你 可 以 按 屏幕 尺寸 给 设备 分 类 ， 并 设计 了 几 组 尺寸 : 手机 、 平 板 电脑 、 笔 记 本 电 
脑 、 宽 屏幕 。 但 是 现在 ， 设 备 不 再 能 够 这 样 轻松 地 分 类 了 ， 因 为 它们 几乎 具有 任何 能 够 想 
象 的 宽度 。 


智能 手机 最 小 的 屏幕 尺寸 大 慨 在 3 英寸 左右 〈 对 角 线 )， 有 许多 是 在 4~5 英寸 之 间 。 目 前 ， 

最 大 尺寸 的 手机 是 三 星 Galaxy Mega, BA 6.3 英寸 的 屏幕 。 当 你 拿 着 它 举 到 耳 边 时 ， 它 
看 上 去 真是 硕大 无 比 ， 不 过 没关系 ， 很 多 人 用 手机 主要 是 为 了 上 网 ， 而 不 是 为 了 与 人 交谈 
(不 管 怎样 ， 你 总 是 可 以 使 用 耳机 来 打 电话 ) 。 


iPad mini， 平 板 电脑 中 的 小 个 子 ， 屏 幕 尺 寸 7.9 英寸 ， 并 不 比 最 大 的 电话 大 多 少 。 许 多 平 
板 电脑 在 7~10 英寸 范围 内 ，iPad 是 9.7 英寸 。 


触 屏 超级 本 的 屏幕 尺寸 从 11.6~13.3 英寸 不 等 ， 触 屏 桌 面 显 示 器 则 大 很 多 ， 我 曾 看 到 一 台 
55 英寸 大 的 甬 屏 桌面 显示 器 在 网 上 销售 ， 不 过 我 相信 超过 5000 美元 的 标价 不 会 有 多 少 人 
能 承受 得 起 。 















































所 以 ， 当 你 创建 一 个 响应 式 网 站 时 ， 需 要 创建 一 个 设计 能 适用 于 所 有 可 能 的 屏幕 尺寸 。 几 


年 前 ， 为 此 创建 四 组 设备 尺寸 的 布局 就 能 够 工作 得 相当 好 了 ， 
iPhone， 几 乎 每 一 台 平 板 电脑 都 是 iPad, 














因为 几乎 每 一 部 手机 都 是 














但 是 现在 ， 各 种 尺寸 的 屏幕 层出不穷 ， 只 关注 小 范围 的 屏幕 尺寸 意味 着 忽略 了 大 量 用 户 。 





旋转 











一 个 常见 于 移动 应 用 程序 (移动 版 网 站 略 少见 ) 的 问题 是 它们 不 能 旋转 。 


网 站 应 该 能 旋转 以 便 不 管 是 在 水 平 〈 横 排 ) 还 是 垂直 方向 〈 竖 排 ) 都 是 可 用 的 。 诚 然 ， 只 
按照 一 个 方向 进行 设计 确实 不 错 ， 但 是 对 于 侧 请 全 键盘 手机 却 有 个 问题 ， 如 图 8-12 所 示 。 











Samsung Galaxy S 


图 8-12: 对 于 侧 滑 全 键盘 手机 ， 网 站 必须 要 能 在 水 平方 向 上 使 用 














对 于 用 户 来 说 ， 当 他 们 以 自己 喜欢 的 方向 握 持 手机 访问 网 站 时 ， 
用 户 做 主 ， 而 你 需要 做 的 是 使 




















人 泪 丧 的 ， 如 图 8-13。 再 一 次 重申 ， 如 何 选 择 及 握 持 设 






































在 侧 滑 全 键盘 手机 上 ， 只 能 以 水 平方 向 查看 应 用 程序 和 网 站 (除非 你 不 需要 使 用 键盘 )。 


却 被 告 之 网 站 不 支持 是 令 





网 站 做 出 响应 以 适应 用 户 。 











图 8-13: 某 些 网 站 需要 以 特定 的 方向 才能 查看 


8.8 ”可 访问 性 (通用 化 设计 ) 





通用 化 设计 (universal design) 的 概念 是 资源 可 以 被 尽 可 能 广 的 月 
仅 是 对 普通 用 户 可 用 。 


昌 户 群体 所 使 用 ， 而 不 仅 





这 其 中 包括 可 访问 性 (accessibility) 的 理念 ， 其 主要 含义 是 确保 网 站 对 身体 残疾 和 有 认 知 
障碍 的 用 户 也 是 可 用 的 。 此 外 你 还 要 确保 网 站 对 老年 用 户 ， 母 语 与 网 站 所 使 用 的 语言 不 同 
的 用 户 以 及 那些 使 用 过 时 的 或 者 非常 规 的 设备 访问 网 站 的 用 户 都 是 容易 使 用 的 。 


不 过 通用 化 这 个 词 暗 指 所 有 人 ， 事 实 上 如 果 你 使 网 站 对 于 残障 人 士 更 具 可 访问 性 ， 通 常 你 


























也 就 使 网 站 对 所 有 人 更 具 可 访问 性 。 





纵 观 本 书 我 们 已 经 解决 了 可 访问 性 ， 它 在 整个 网 页 设计 的 过 程 中 应 明确 成 为 一 个 考虑 因素 。 
但 现在 我 们 将 讨论 你 需要 关注 的 各 种 类 型 的 网 页 访问 方式 ， 以 及 一 些 值得 思考 的 关键 点 。 





[ 小 贴 士 ] 


可 访问 性 涵盖 了 很 多 内 容 ,， 但 由 于 本 书 篇 幅 有 限 ， 就 不 在 此 展开 。 想 


性 ， 可 查看 Shawn Lawton Henry 所 写 的 Just Ask: Integrating Accessib 




















有 要 更 多 地 了 解 可 访问 
ility Throughout Design 


( http://www.uiaccess.com/JustAsk/ )， 其 可 免费 在 线 阅读 ; 或 Katie Cunningham 的 Accessibility 


Handbook — # ( http://shop.oreilly.com/product/0636920024514.do )。 





8.8.4 视觉 

因为 我 们 大 多 数 人 都 认为 使 用 电脑 或 移动 设备 主要 是 一 种 视觉 体验 ， 由 此 显而易见 ， 对 于 
使 用 电脑 或 移动 设备 一 个 主要 的 障碍 是 看 不 见 屏幕 ， 或 者 是 看 不 清楚 。 

1. 屏幕 阅读 器 

举 个 例子 ， 宣 人 用 户 使 用 称 为 屏幕 阅读 器 的 软件 来 上 网 ， 这 种 软件 向 用 户 大 声 阅 读 电 脑 屏 
幕 上 的 文字 。 























使 用 正确 、 语 义 化 HTML. (无 论 如 何 你 都 应 该 这 么 做 ) 是 使 网 站 可 访问 的 第 一 步 。 如 果 使 
用 语义 化 HTML 编码 网 站 ， 正 确 标记 标题 、 导 航 和 表单 等 元 素 ， 这 将 使 用 户 能 够 更 容易 地 
导航 网 站 ， 即 使 是 看 不 见 网 站 的 用 户 。 


在 本 书 中 我 们 已 经 几 次 提 及 屏幕 阅读 器 ， 并 在 其 他 章 中 讨论 了 要 确保 网 站 对 使 用 屏幕 阅读 
器 的 用 户 是 可 访问 的 所 要 做 的 几 件 事 。 














为 了 更 好 地 了 解 谨 人 是 如 何 通过 听 来 访问 网 页 的 ， 可 下 载 一 个 屏幕 阅读 器 试用 下 。 比 如 
Fangs Screen Reader Emulator (https://addons.mozilla.org/en-us/firefox/addon/fangs-screen- 
reader-emulator/), —^r H1 Peter Krantz 开发 的 Firefox 浏览 器 附加 组 件 。 


[ 小 贴 士 ] 

想 了 解 使 用 屏幕 阅读 器 的 真实 体验 ? 你 可 以 看 看 David Ball 的 博客 文章 “Things I learned by 
pretending to be blind for a week" (http://blog.silktide.com/2013/01/things-learned-pretending-to- 
be-blind-for-a-week/ )， 文 中 讲述 了 他 作为 正常 人 戴 着 眼罩 使 用 屏幕 阅读 器 上 网 一 周 的 体验 。 


2. 文本 大 小 

对 大 多 数 网 站 来 说 ， 虽 然 守 人 用 户 只 占 到 受众 的 很 小 一 部 分 ， 但 低 视力 用 户 则 是 一 个 更 大 
数量 的 用 户 群体 。 医 学 上 对 低 视 力 的 定义 是 指 即使 带 矫 正 镜片 也 不 能 在 正常 的 视 距 上 阅读 
报纸 的 人 。 为 了 本 书 的 需要 ， 我 将 其 范围 扩大 了 一 点 ， 把 它 定 义 为 上 网 时 看 不 清 电 脑 屏幕 
的 人 。 


这 所 包含 的 人 数 将 大 大 超过 你 的 想象 。 


当 我 们 变 老 时 视力 会 自然 退化 。 尤 其 是 ， 在 40 岁 左 右 时 我 们 的 视觉 敏锐 度 开始 下 降 CIA 
此 很 多 年 长 者 戴 上 了 老人 花镜 ) 。 
这 意味 着 许多 用 户 ， 特 别 是 ， 但 又 不 仅仅 是 ， 老 年 用 户 很 难看 清 电脑 屏幕 上 的 内 容 。 走 过 


王 何 一 个 有 年 长 员工 的 办 公 室 ， 你 会 看 到 这 之 中 的 有 些 人 是 睐 着 眼睛 看 屏幕 ， 身 体 前 倾 坛 
图 看 清 过 小 的 字符 。 









































所 以 在 创建 网 站 时 要 考虑 到 此 种 情况 : 确保 所 有 文字 都 是 易于 阅读 的 大 小 ， 不 只 是 为 了 
你 ， 而 是 为 了 大 多 数 用 户 。 我 们 对 此 将 在 第 9 章 中 做 进一步 讨论 。 





还 请 确保 你 的 代码 不 会 做 任何 阻止 用 户 调整 页 面 上 文字 大 小 的 事情 ， 例 如 不 在 元 视 口 标记 
上 使 用 user-scalable=no 属性 ， 我 们 在 第 3 章 已 经 讲述 过 这 个 例子 。 


3. 颜色 对 比 
网 站 中 文字 的 颜色 对 其 易 读 性 有 显著 的 影响 。 


白 底 黑 字 是 简单 直接 且 经 典 的 对 比 色 , 但 是 你 可 能 想 使 文字 颜色 的 对 比 变 得 更 有 趣 一 点 。 
































不 过 ， 需 要 记 住 ， 如 果 文 字 的 背景 色 和 前 景色 没有 足够 的 对 比 度 ， 访 问 你 站 点 的 用 户 可 能 
在 阅读 文字 时 会 有 困难 。 这 将 包括 那些 视力 不 好 的 用 户 ， 比 如 许多 的 年 长 者 以 及 那些 色 宣 
患者 。 即 使 对 于 视力 良好 的 人 ， 当 试图 在 刺眼 的 光线 下 陪读 小 小 的 手机 屏幕 时 ， 低 对 比 度 
的 文字 可 能 也 是 一 个 问题 。 























记 住 网 站 的 视觉 设计 是 建立 在 你 的 内 容 基 础 之 上 的 ， 而 不 是 要 压制 内 容 。 





网 页 内 容 可 访问 性 指南 (Web Content Accessibility Guidelines，WCAG) 建议 文本 颜色 
与 背景 色 的 对 比 度 至 少 是 4.5 : 1。 对 于 大 号 文本 ， 比 如 标题 ， 对 比 度 则 只 需 为 3 : 1, 
为 即使 是 低 对 比 度 ， 大 号 文字 也 更 容易 阅读 。 有 关于 此 的 更 多 信息 ， 参 见 W3C 网 站 上 
的 “Understanding WCAG 2.0 - Contrast (Minimum)” (http://www.w3.org/TR/UNDERST 
AANDING-WCAGO0/visual-audio-contrast-contrast.html ) 。 





只 通过 眼睛 来 看 ， 通 常 分 辨 不 出 颜色 对 比 是 否 是 可 接受 的 ， 但 是 你 可 以 使 用 在 线 工 具 ， 比 
如 WebAIM 的 Color Contrast Checker (http://webaim.org/resources/contrastchecker/) 来 检查 
两 种 颜色 之 间 是 否 有 足够 的 对 比 度 。 只 需 输入 两 种 颜色 的 十 六 进 制 编码 ， 它 就 会 告诉 你 两 
种 颜色 的 对 比 度 以 及 在 标准 文本 和 大 文本 中 其 对 比 度 是 否 能 通过 标准 。 











另 一 个 工具 是 Jonathan Snook 的 Color Contrast Check (http://snook.ca/technical/colour_contrast/ 
colour.html) 。 输 入 颜色 编码 后 ， 它 可 以 让 你 通过 用 滑 块 调整 RGB 设置 一 一 色调 、 饱 和 度 
和 颜色 值 ， 更 直观 地 获得 一 组 合格 的 颜色 。 














如 果 要 一 次 同时 检测 网 站 上 的 的 所 有 内 容 ， 可 以 使 用 Giovanni Scala 的 CheckMyColours 
(http:Wwww.checkmycolours.com ) 。 它 会 测试 网 页 上 的 每 个 元 素 ， 并 给 出 一 个 检测 结果 表 ， 
列 出 通过 检测 和 未 通过 检测 的 颜色 。 


即使 灰色 也 可 能 成 为 一 个 问题 。 现 在 流行 用 灰色 代替 黑色 来 显示 文本 ， 它 看 起 来 更 优雅， 
但 通常 难以 阅读 。 























8-14 中 的 文字 分 别 是 纯 黑色 (#000000) 和 两 种 不 同 深浅 的 灰色 (#777777 和 #AAAAAA)。 
两 种 灰色 的 对 比 度 测试 都 是 不 合格 的 。 
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Lorem ipsum dolor sit amet, consectetur adipiscing elit 


Lorem ipsum dolor sit amet, consectetur adipiscing elit 











图 8-14. 两 种 不 同 深浅 的 灰色 文本 未 能 通过 对 比 度 测试 


4. 色盲 
在 网 站 上 运用 颜色 时 另 一 件 要 学 虑 的 事情 是 确保 不 会 对 色盲 用 户 造 成 障碍 。 











色 宣 患者 并 非 看 什么 都 是 不 同 程度 的 灰色 ， 这 种 类 型 的 色 宣 是 非常 罕见 的 。 相 反 ， 他 们 通 
常 是 分 辨 不 出 某 些 颜 色 。 例 如 ， 最 常见 的 是 红 绿 色 盲 ， 对 他 们 来 说 深浅 不 同 的 红色 和 绿色 
看 起 来 十 分 接近 。 

这 意味 着 对 他 们 来 说 红绿灯 的 红 灯 和 绿灯 都 是 相似 的 颜色 。 但 色 宣 的 人 仍 可 以 开车 ， 因 为 
他 们 知道 最 上 面 的 总 是 红 灯 ， 最 下 面 的 总 是 绿灯 ， 即 使 颜色 看 上 去 是 一 样 的 。 在 这 种 情况 
下 ,位 置 被 用 来 传达 含义 ， 作 为 颜色 的 一 种 补充 。 

你 需要 为 网 站 做 同样 的 事情 。 将 颜色 用 于 视觉 装饰 完全 可 按照 你 自己 想法 ， 但 如 果 是 使 用 
颜色 来 传达 意义 ， 就 需要 包含 一 个 补充 方法 。 

例如 ， 你 可 能 会 有 一 个 产品 特性 对 比 图 / 表 ， 其 中 使 用 了 红色 和 绿色 去 标注 是 否 具备 某 一 
功能 。 与 此 同时 ， 你 还 可 以 x 入 来 传达 同样 的 信息 。 颜 色 看 起 来 引 人 注目 一 一 也 许 一 
眼 就 能 看 出 你 的 产品 绿 标 远 远 超过 了 竞争 对 手 的 产品 ， 但 无 法 区 分 颜色 的 人 仍 能 够 用 x 
入 来 理解 这 个 对 比 图 。 


颜色 是 网 站 内 容 的 一 个 关键 部 分 时 ， 你 需要 提供 足够 的 信息 以 便 用 户 可 以 做 出 准确 的 选择 。 
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例如 ， 一 个 销售 衬衫 的 在 线 购物 网 站 应 确保 标注 出 颜色 名 称 ， 而 不 是 仅仅 提供 一 个 颜色 
方块 来 演示 颜色 。 此 外 ， 还 要 使 用 准确 的 颜色 名 。 假 如 一 个 流行 的 服装 网 站 使 用 “sugar 
coral”( 糖 珊瑚 一 珊瑚 红 ) 和 “cloudburst”( 暴 雨 云 一 蓝 铅 灰 ) 之 类 的 颜色 名 。 虽 然 它们 让 
服装 听 上 去 很 迷人 ， 但 那些 无 意义 的 名 字 肯 定 不 会 对 无 法 区 分 颜色 的 客户 有 所 帮助 。 








欲 了 解 更 多 有 关 色 宣 对 网 站 用 户 影响 的 信息 ， 可 以 查看 Geri Coady 发 表 在 24 Ways 上 的 博 
客 文章 “Colour Accessibility” (http:/www.24ways.org/2012/colour-accessibility/) ， 文 中 有 很 
多 极 好 的 例子 说 明了 如 何 确保 你 的 网 站 符合 可 访问 性 标准 。 





8.82 音频 
大 多 数 网 络 内 容 是 视觉 内 容 ， 还 有 一 些 则 是 听觉 内 容 ， 比 如 视频 和 音频 剪辑 。 对 于 侮 人 或 
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听力 不 好 的 用 户 ， 这 些 信息 需要 以 不 同 的 形式 出 现 才能 使 其 具有 可 访问 性 。 


视频 应 尽 可 能 配 上 字幕 。 遗 憾 的 是 ， 虽 然 视频 创作 并 不 需要 多 少 专业 技能 〈 几 乎 任何 人 都 
可 以 做 )， 但 添加 字幕 就 困难 了 些 。 如 果 不 能 给 视频 加 上 字幕 ， 可 以 选择 提供 一 个 文字 副本 。 
但 还 是 比 不 上 字幕 ， 因 为 用 户 可 能 无 法 将 视觉 图 像 与 文字 同步 对 应 上 ， 但 这 总 好 过 没有 。 

















当然 ， 音 频 剪 辑 也 应 该 有 一 个 文字 副本 。 











这 不 仅 能 帮助 听 不 见 内 容 的 用 户 。 其 他 用 户 也 可 能 喜欢 阅读 文字 (这样 更 快 ) 而 不 是 听 。 
或 者 他 们 所 在 的 地 方 非常 嘲 杂 ， 难 以 听 清 内 容 ， 或 者 是 在 图 书馆 那样 安静 的 地 方 ， 他 们 不 
能 大 声 地 播放 音频 ， 也 没有 耳机 。 

















8.8.3 输入 方法 
尽管 有 视觉 障碍 的 用 户 是 最 明显 的 需要 使 用 辅助 设备 上 网 的 一 类 人 ， 但 也 有 人 没有 视力 问 
题 ， 但 却 可 能 因 别 的 身体 原因 ， 不 能 像 我 们 大 多 数 人 那样 使 用 键盘 和 /或 鼠标 。 


1. 只 用 键盘 
一 些 用 户 能 够 使 用 键盘 ， 但 无 法 使 用 像 鼠 标 那 样 的 定位 设备 。 这 可 能 是 由 于 患 上 了 诸如 腕 
管 综 合 症 这 类 常见 的 病 。 


盲人 也 属于 这 一 类 用 户 ， 他 们 可 以 凭 触觉 使 用 键盘 ， 但 无 法 使 用 定位 设备 ， 因 为 他 们 看 不 
到 屏幕 上 指针 的 位 置 。 


还 有 些 高 级 用 户 喜欢 用 键盘 代替 鼠标 ， 只 是 因为 他 们 觉得 敲 键 的 速度 要 快 过 来 回 移动 鼠标 
的 速度 。 


默认 情况 下 ，HTML 就 能 使 网 页 对 于 只 用 键盘 的 用 户 具 有 相当 的 可 访问 性 。 但 你 需要 确保 
不 会 做 错 事情 而 破坏 这 种 可 访问 性 。 


只 用 键盘 的 用 户 使 用 Tab 键 ( 制 表 键 ) 在 屏幕 上 的 元 素 中 导航 。 从 一 个 可 被 选择 的 元 素 跳 
到 另 一 个 可 被 选择 的 元 素 (表单 域 、 链 接 等 )， 所 选中 的 元 素 是 突出 显示 的 。 试 试 去 一 个 
网 站 ， 按 几 下 Tab 键 ， 你 会 看 到 ， 页 面 上 的 链接 在 选中 时 是 被 一 个 虚线 框 围 住 的 。 如 果 你 
按 下 回 车 键 ， 产 生 的 效果 与 点 击 选中 的 链接 是 一 样 的 。 


制 表 键 跳 转 的 顺序 与 HTML 定义 元 素 的 顺序 相同 ， 这 是 确保 HTML 按 逻辑 顺序 编写 的 另 
一 个 好 理由 。 


对 于 使 用 键盘 导航 且 看 不 见 屏 幕 的 用 户 ， 元 素 需 要 标注 清楚 。 比 如 ， 对 于 链接 应 该 描述 点 
击 它 之 后 会 发 生 什么 ， 而 不 是 使 用 千篇一律 的 “点 击 这 里 ”。 












































2. 语音 识别 软件 
完全 无 法 使 用 键盘 的 用 户 可 以 使 用 语音 识别 软件 ， 它 使 用 户 能 通过 语音 来 指挥 电脑 。 





一 般 来 说 ， 如 果 网 站 对 于 只 用 键盘 的 用 户 是 可 访问 〈 无 障碍 ) 的 ， 那 它 对 于 使 用 语音 识别 
软件 的 用 户 也 是 可 访问 (无 障碍 ) 的 。 但 一 个 额外 的 考虑 因素 是 要 确保 表单 域 和 链接 有 独 
一 无 二 的 标签 ， 使 得 语音 用 户 能 够 轻松 地 选择 他 们 。 





8.8.4 认 知 障碍 
有 认 知 障碍 的 人 是 网 站 用 户 基 数 中 一 个 常 被 忽视 的 部 分 。 





如 我 们 在 第 2 章 中 讲 过 的 ， 采 用 简单 明了 的 语言 是 使 网 站 对 这 些 用 户 更 具 可 访问 性 的 一 个 
很 好 的 开始 。 这 也 能 帮助 那些 母语 与 网 站 所 使 用 语言 不 同 的 用 户 。 








你 还 可 以 通过 在 整个 网 站 中 采用 连续 一 致 的 设计 模式 来 帮助 用 户 访问 ， 比 如 在 每 个 页 面 上 
使 用 相同 的 导航 选项 。 如 果 你 重新 设计 一 个 网 站 ， 某 些 用 户 将 不 得 不 “重新 学 习 ” 如 何 使 
用 网 站 ， 对 他 们 来 说 ， 这 可 不 是 简单 的 找 找 看 的 

















Um 
o 

















另 一 个 问题 是 动画 图 形 ， 其 会 分 散 有 阅读 障碍 或 多 动 症 (ADHD) 用 户 的 注意 力 。 在 默认 
情况 下 最 好 不 要 在 网 页 上 有 动画 图 形 ， 并 确保 不 使 用 动态 GIF 来 传达 信息 ， 因 为 有 些 用 户 
会 使 用 浏览 器 设置 完全 关闭 掉 动 画 选 项 。 


8.9 ”决定 支持 哪些 设备 


响应 式 设计 的 环 手 之 处 在 于 不 只 是 为 不 同 屏幕 尺寸 进行 设计 。 毕 竞 ， 你 可 以 通过 改变 阐 览 
器 窗口 的 大 小 来 轻松 地 设计 和 测试 媒体 查询 。 困 难 的 部 分 在 于 如 何 确 保 网 站 能 够 在 尽 可 能 
广 的 各 色 设 备 上 工作 。 仅 仅 是 在 调整 浏览 器 窗口 大 小 时 看 到 网 站 显示 得 还 不 错 并 不 意味 着 
问题 不 会 突然 出 现在 某 些 设备 上 。 事 实 上 各 浏览 器 所 支持 的 功能 并 不 完全 相同 ， 每 个 设备 
FUI SE Db HT REAMER. 







































































当 我 们 开始 一 个 项 目 时 ， 我 们 需要 决定 站 点 设计 将 支持 哪些 设备 ， 这 并 不 是 说 网 站 只 有 在 
这 些 设备 上 才能 工作 ， 只 是 意味 着 你 仅 允 诺 在 这 些 设备 上 进行 测试 来 确保 网 站 正常 工作 。 








而 响应 式 网 站 是 被 设计 成 可 在 任何 尺寸 或 类 型 的 设备 上 工作 的 ， 在 这 些 设 备 上 偶尔 发 生 的 
怪异 情况 可 能 会 导致 某 种 错误 的 发 生 ， 而 你 又 不 可 能 去 实地 测试 每 一 个 设备 。 所 以 ， 你 需 
要 选择 一 系列 的 设备 和 浏览 器 〈 通 常 能 够 代表 常见 设备 、 操 作 系 统 、 浏 览 器 、 视 口 大 小 ) 
在 它们 上 面 进行 测试 。 
























































下 面 是 你 可 以 包含 在 网 站 项 目 计划 中 的 设备 及 浏览 器 清单 列表 。 








。 j5fT Microsoft Windows 7 及 其 更 新 版 本 的 电脑 














o Internet Explorer 9 及 其 更 新 版 本 
o 最 新 版 本 的 Firefox、Safari 和 Chrome 

















。 运行 Mac OS X 10.7 Lion 及 其 更 新 版 本 的 电脑 
o 最 新 版 的 Firefox、Safari 和 Chrome 











。 运行 Android 4.0 (冰淇淋 三 明治 ) 及 其 更 新 版 本 的 平板 和 智能 手机 
o Nexus 7 平板 上 的 Chrome 
o LG 和 Motorola 智能 手机 上 的 Chrome 





。 运行 iOS 6.0 系统 的 iPhone 3GS 
9 Mobile Safari 


。 jafTiOS 7.0 系统 的 iPhone 4s FU 5, iPad 2 和 iPad mini 
o Mobile Safari 
o Chrome for iOS 








列表 中 的 具体 设备 将 取决 于 项 目的 需要 。 例 如 ， 上 述 列表 不 包括 黑 稚 或 Windows Phone ix 
备 。 现 有 网 站 的 统计 数据 可 能 会 告诉 你 ， 只 有 极 少 的 访客 使 用 黑莓 手机 ， 所 以 你 可 能 觉得 
不 值得 花 时 间 提 供 对 这 些 设备 的 支持 。 但 请 记 住 ， 如 果 现 有 网 站 不 能 在 某 些 移动 设备 上 很 
好 地 工作 ， 统 计数 据 可 能 无 法 表明 有 多 少 拥有 那些 设备 的 用 户 因 无 法 使 用 而 离开 了 你 的 网 
站 ， 如 果 网 站 能 在 他 们 的 设备 上 正确 工作 ， 他 们 是 有 可 能 变 成 正式 用 户 的 。 









































你 还 应 该 找 出 所 有 利益 相关 人 所 使 用 的 设备 ， 并 确保 在 这 些 设备 上 进行 了 测试 ， 即 使 它们 
不 太 常 见 。 不 管 清 单 上 列 出 了 什么 设备 ， 你 的 利益 相关 人 都 会 希望 网 站 能 在 他 们 自己 的 手 
机 上 正常 工作 。 


* ra s * ^3 sl» 
8.10 为何 要 用 真实 设备 进行 测试 
无 需 因 为 你 正 计 划 要 支持 所 列 清单 中 的 特定 设备 ， 就 必须 实际 拥有 这 些 设备 。 你 可 以 使 用 
在 线 仿真 器 和 模拟 器 来 查看 网 站 在 各 种 设备 上 是 个 什么 样子 (更 多 细节 在 下 一 节 展 开 )。 
不 过 ， 尽 管 在 桌面 浏览 器 中 使 用 仿真 器 能 够 让 你 查看 网 站 在 各 种 设备 上 的 显示 效果 ， 但 它 
却 无 法 让 你 去 感受 网 站 的 用 户 体验 。 比 如 ， 触 摸 目标 足够 大 吗 ” 它 在 各 内 容 部 分 之 间 移 动 
容易 吗 ? 在 慢 速 的 移动 网 络 连接 上 网 站 的 加 载 速度 足够 快 吗 ? 


































































































如 果 你 不 能 获得 所 有 想 要 测试 的 真实 设备 ， 最 起 码 你 应 该 在 一 部 iPhone、 一 部 Android 
手机 、 一 台 iPad 和 一 台 7 英寸 平板 电脑 (iPad mini 或 Android 平板 ) 上 进行 测试 。 这 是 
除了 在 Mac OS 和 Microsoft Windows 这 两 个 操作 系统 上 的 所 有 主流 浏览 器 之 外 要 进行 
的 测试 。 





8.10.1. 设备 实验 室 
在 理想 状态 下 ， 每 个 制作 网 站 的 公司 都 将 有 一 个 设备 实验 室 (device lab) ， 里 面 有 各 种 各 
样 的 移动 设备 ， 设 计 人 员 和 开发 人 员 可 以 用 它们 来 测试 网 站 。 但 事实 却 是 ， 除 非 你 在 一 个 
大 公司 里 工作 ， 具 有 很 多 的 设备 预算 ， 否 则 你 不 可 能 那么 幸运 地 拥有 这 么 多 测试 设 






































你 或 许可 以 问 问 周围 的 人 ， 至 少 能 找到 几 个 会 借 给 你 手机 的 同事 ,但 很 可 能 他 们 拥有 的 设 
备 相 似 ， 所 以 你 无 法 找到 所 有 你 想 要 测试 的 设备 类 型 。 











在 过 去 几 年 中 新 出 现 的 开放 式 设备 实验 室 也 是 一 个 解决 方案 。 你 可 以 在 开放 式 设备 实验 室 
找到 许多 开放 给 社区 使 用 的 移动 设备 。 一 些 设备 实 验 室 属于 网 络 机 构 或 其 他 慷慨 的 向 公众 开 
放 其 实验 室 的 公司 ， 另 一 些 则 是 由 社区 组 织 或 者 非 营 利 组 织 依靠 捐赠 的 资源 建立 起 来 的 。 


世界 各 地 都 有 开放 式 设 备 实 验 室 ， 虽 然 大 多 数 都 位 于 欧洲 和 美国 的 主要 大 城市 。 你 可 以 在 
OpenDeviceLab.com 上 找到 一 个 设备 实验 室 列 表 (http://opendevicelab.com ) 。 















































你 会 发 现 不 同 设 备 实验 室 里 的 设备 各 有 不 同 。 一 些 实验 室 可 能 只 有 少量 设备 ， 而 有 些 实验 
室 则 可 能 会 有 大 量 的 不 同 操作 系统 和 型 号 规格 的 设备 。 一 些 设备 实验 室 收费 少量 的 使 用 费 
用 ， 但 大 多 数 都 是 免费 的 。 














8.10.2 ”购买 设备 
虽然 购买 设备 用 于 测试 听 起 来 花费 不 非 ， 但 还 是 有 办 法 来 便宜 地 获得 其 中 的 一 些 设 



































必须 为 每 部 手机 支付 合约 计划 贵 得 让 人 望而却步 ， 但 是 许多 手机 可 以 在 Wi-Fi 上 使 用 而 无 
须 为 合约 计划 掏 钱 。 这 对 于 测试 来 说 通常 已 经 足够 了 ， 尽 管 它 不 能 让 你 在 移动 网 络 连接 上 
的 测试 性 能 。 


你 可 以 从 eBay, Craigslist 或 其 他 销售 网 站 获得 许多 二 手 旧 手机 ， 甚 至 向 朋友 和 同事 询问 。 
并 非 所 有 的 移动 运营 商都 提供 有 以 旧 换 新 的 “ 抵 价 ”服务 ， 所 以 人 们 往往 只 是 把 他 们 的 旧 
手机 收入 橱柜 的 盒子 中 ， 因 为 将 原本 昂贵 的 设备 扔 掉 似 乎 让 人 有 些 不 含 得 。 


你 可 能 已 经 拥有 或 者 可 以 轻易 借 到 一 部 iPhone 和 Android 手机 ， 你 也 值得 拥有 一 台 7 英寸 
和 一 台 10 英寸 的 平板 电脑 在 手边 以 备 测 试 ， 这 样 你 可 以 真实 地 体会 到 在 这 些 设备 上 浏览 
网 站 与 只 是 在 仿真 器 中 浏览 它 的 感觉 是 截然 不 同 的 。 


8.11 测试 

正如 我 们 在 书 中 提 到 的 ， 成 功 的 响应 式 设计 的 一 个 关键 是 在 各 种 设备 上 测试 你 的 网 站 。 除 
了 使 用 实际 的 设备 之 外 ， 还 有 其 他 的 方法 来 测试 你 的 网 站 ， 从 而 确保 它 能 在 最 广泛 的 设备 
上 正确 地 工作 。 
















































































8.11.1 验证 器 

测试 网 站 首先 要 做 的 事情 之 一 是 验证 代码 。 这 能 从 源 代 码 中 迅速 捕获 代码 错误 ， 并 能 在 排 
除 内 容 显 示 不 正确 的 故障 中 市 省 大 量 的 时 间 。 

验证 工具 通常 内 建 于 主流 浏览 器 的 web 开发 人 员 附 件 中 ， 或 者 你 可 以 使 用 线 上 服务 来 验 
证 你 的 代码 ， 比 如 可 分 别 验证 HTML fü CSS 的 W3C Markup Validation Service (http:// 
validator.w3.org) 和 W3C CSS Validation Service (http://jigsaw.w3.org/css-validator) 。 





























8.11.2 ”在 浏览 器 窗口 调整 

当 你 设计 或 编码 响应 式 网 站 时 ， 你 肯定 会 调整 浏览 器 窗口 的 大 小 来 查看 设计 在 不 同 的 视 口 
宽度 下 的 显示 效果 。 虽 然 这 是 有 用 的 ， 而 且 你 也 应 该 从 那 开始 ， 但 它 不 一 定 能 准确 反应 出 
网 站 在 实际 设备 上 的 真实 显示 效果 。 


不 过 ， 调 整 浏览 器 窗口 大 小 来 查看 设计 这 种 方法 能 够 给 予 你 一 个 在 移动 设备 上 无 法 歼 得 的 
优势 : 你 可 以 在 每 个 可 能 的 视 口 宽度 下 查看 设计 的 显示 效果 ， 而 不 仅仅 是 你 要 测试 的 那些 
设备 的 宽度 。 不 管 你 有 多 少 设备 可 供 测 试 ， 你 都 不 可 能 查看 每 一 种 可 能 的 设备 宽度 ， 所 以 
浏览 器 窗口 也 许 是 唯一 能 够 看 到 只 出 现在 643 和 647 像素 之 间 的 某 些 奇怪 的 布局 的 地 方 。 












































8.11.3 浏览 器 工具 
当 你 开始 在 浏览 器 中 进行 测试 时 ， 有 几 个 工具 可 以 使 测试 工作 更 容易 些 。 

















改变 窗口 大 小 不 但 能 让 你 了 解 设计 在 所 有 视 口 宽 度 下 的 显示 效果 ， 你 还 会 发 现 它 可 用 来 查 
看 网 站 在 常见 设备 的 精确 尺寸 下 的 显示 效果 。 
































这 在 Firefox 中 很 容易 做 到 ， 它 有 一 个 内 置 的 工具 ， 可 通过 “工具 ”一 “Web 开 发 
者 ”一 “响应 式 设计 视图 ”菜单 打开 它 ， 如 图 8-15 所 示 。 在 载 入 一 个 页 面 之 后 ， 你 可 以 用 
下 拉 荣 单 在 几 个 不 同 的 预 置 屏幕 尺寸 间 切 换 ， 甚 至 还 提供 有 按钮 允许 你 对 网 页 进行 截图 。 





























在 Safari 中 ， 有 一 个 叫 Resize 的 扩展 (http://resizesafari.com/) 能 够 让 你 将 浏览 器 窗口 大 小 
调整 为 可 配置 的 预 置 大 小 。 


对 于 Chrome， 可 以 尝试 Windows Resizer (https://chrome.google.com/webstore/detail/window- 


resizer/kkelicaakdanhinjdeammmilcgefonfh) 。 
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图 8-15; Firefox 中 的 响应 式 设 计 视图 (Responsive Design View) 


8.11.4 浏览 器 与 操作 系统 


几 年 前 ， 我 们 仅 在 两 个 操作 系统 (Mac OS 和 Microsoft Windows) 及 少量 的 浏览 器 
(Firefox, IE, Safari 和 Opera) 中 测试 网 站 。 





然而 ， 现 在 有 数 种 移动 操作 系统 和 许多 移动 浏览 器 也 需要 考虑 。 下 面 是 主要 的 移动 操作 系 
统 及 其 默认 浏览 器 列表 。 

















e iOS (iPhone, iPad) : Safari 
e Android: Chrome ( 较 新 的 设备 ) 或 Android Browser ( 较 早 的 设备 ) 


* Windows Phone: Internet Explorer Mobile 








* Blackberry: Blackberry Browser 


对 于 每 一 个 操作 系统 ， 你 应 该 在 其 最 新 版 上 进行 测试 ， 并 在 条 件 允 许 时 ， 也 测试 一 下 上 一 
个 主要 版 本 ， 尤 其 是 对 10S 和 Android, 
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你 可 能 也 希望 测试 下 运行 在 诺基亚 设备 上 的 Symbian OS， 直 到 2010 年 ， 它 还 是 全 球 最 受 
欢迎 的 操作 系统 ， 许 多 塞 班 手机 仍 在 使 用 中 。 此 外 还 有 几 个 开源 移动 操作 系统 可 供 使 用 ， 
包括 Firefox OS, Sailfish OS 和 Ubuntu Touch OS, 





Kindle Fire 运行 Fire OS 操作 系统 ， 其 是 一 个 定制 版 的 Android, 


c 


每 台 手 机 都 带 有 默认 的 浏览 器 ， 比 如 刚刚 列 出 的 那些 ， 并 且 很 多 用 户 甚至 没有 意识 到 他 们 
可 以 选择 在 自己 的 手机 上 安装 其 他 浏览 器 ， 就 像 在 桌面 电脑 上 。 除 了 已 经 列 出 的 默认 浏览 
器 ， 你 还 可 测试 : 




















。 Dolphin Browser (Android, iOS) 

* Chrome (Android, iOS) 

* Firefox for Mobile (Android) 

e Opera Mini (Android, iOS, Blackberry 及 其 他 设备 类 型 ) 
e Opera Mobile (Android 及 其 他 设备 类 型 ) 

















也 不 要 忘 了 台式 电脑 。 在 Microsoft Windows 和 Mac OS X 系统 上 进行 测试 时 ， 务 必 在 下 列 
主流 浏览 器 上 进行 测试 : 





* Chrome (Mac OS X, Microsoft Windows) 
e Firefox (Mac OS X, Microsoft Windows) 
* Internet Explorer (Microsoft Windows) 

* Opera (Mac OS X, Microsoft Windows) 

e Safari (Mac OS X, Microsoft Windows) 


8.11.5 ”仿真 器 与 模拟 器 
实际 上 如 果 没 有 某 个 特定 的 设备 ， 通 过 使 用 仿真 器 或 模拟 器 你 仍然 可 以 在 该 设备 上 进行 测 
试 ， 这 种 方式 将 使 你 能 够 使 用 桌面 显示 器 来 查看 网 站 在 特定 的 设备 上 将 会 是 个 什么 样子 。 














仿真 器 与 模拟 器 的 区 别 是 ， 前 者 会 模仿 设备 的 表现 ， 而 后 者 只 是 显示 设备 的 屏幕 显示 效 
果 。 

















很 多 移动 操作 系统 和 厂商 都 提供 有 仿真 器 或 模拟 器 下 载 ， 你 可 以 查看 Maximiliano Firtman 
的 文章 “Mobile Emulators & Simulators: The Ultimate Guide" (http://www.mobilexweb.com/ 
emulators) ， 其 中 提供 有 一 个 长 长 的 查阅 列表 。 


不 过 ， 并 无 必要 去 下 载 大 量 不 同 的 软件 ， 你 会 发 现 那些 基于 浏览 器 的 工具 更 容易 使 用 ， 它 
能 让 你 同时 测试 很 多 设备 或 操作 系统 。 











最 流行 和 最 全 面 的 两 个 工具 分 别 是 BrowserStack (http://www.browserstack.com) 和 Cross 
Browser Testing (http://crossbrowsertesting.com)， 它 们 基于 用 户 数 或 用 量 按 月 收费 。 你 可 
以 通过 网 络 搜索 到 很 多 其 他 的 类 似 工具 ， 有 些 是 可 以 免费 使 用 的 。 


8.11.6 辅助 技术 


不 要 忘记 某 些 用 户 将 使 用 辅助 技术 来 访问 你 的 网 站 ， 比 如 屏幕 阅读 器 。 


要 确保 这 些 用 户 能 够 访问 你 的 网 站 ， 你 应 该 至 少 在 一 个 屏幕 阅读 器 中 对 网 站 进行 测试 。 如 
有 果 你 没有 预算 购买 商业 软件 ， 以 下 有 几 个 免费 的 选项 可 用 。 








Mac OS X 有 一 个 系统 内 置 的 屏幕 阅读 器 : Voiceover for OS X (http://www.apple.com/ 


accessibility/osx/voiceover/) , 


你 也 可 试 下 Fangs Screen Reader Emulator (https://addons.mozilla.org/en-US/firefox/addon/ 
fangs-screen-reader-emulator/), —^ Firefox 附加 组 件 。 








在 用 屏幕 阅读 器 进行 测试 之 前 ， 你 可 以 先 查 看 网 站 在 不 显示 图 像 〈 由 替代 文本 代替 ) 时 
的 样子 ， 来 看 看 网 站 是 否 仍 能 被 人 看 懂 。 在 主流 浏览 器 的 开发 者 工具 插件 中 通常 都 有 这 


个 选项 。 


8.12 总 结 


在 创建 响应 式 网 站 时 ， 你 需要 充分 考虑 用 户 及 用 户 可 能 会 使 用 的 设备 。 虽 然 响应 式 设计 并 
不 是 仅 为 移动 设备 设计 ， 但 把 注意 力 更 多 地 放 在 移动 设备 上 是 很 自然 的 ， 因 为 我 们 对 它 还 
不 太 熟 悉 ， 有 太 多 的 新 功能 和 局 限 因 素 要 孝 虑 。 只 是 也 不 要 忘 了 确保 你 的 设计 在 桌面 显示 
器 屏幕 上 也 有 良好 的 效果 。 




















你 的 设计 不 应 该 只 针对 特定 设备 ， 而 应 该 能 在 所 有 设备 上 都 有 效 地 工作 。 通 过 把 注意 力 集 
中 在 移动 优先 上 ， 更 容易 确保 网 站 在 移动 设备 上 能 有 效 地 工作 。 





























响应 式 设 计 不 是 一 个 非 此 即 彼 的 方法 。 如 果 你 没有 资源 使 网 站 是 完全 响应 式 的 ， 至 少 可 以 
使 其 是 部 分 响应 式 的， 这 也 要 好 过 完全 不 具 响 应 性 的 网 站 。 

















有 许多 不 同类 型 的 设备 可 以 上 网 ， 从 手机 、 平 板 电 脑 到 台式 电脑 ， 以 及 其 他 的 诸如 电子 书 
阅读 器 、 智 能 手表 等 设备 。 触 摸 是 当下 我 们 为 移动 设备 进行 设计 时 最 大 的 一 个 变数 ， 务 必 
使 你 的 触摸 目标 足够 大 ， 且 JavaScript 事件 能 正确 工作 于 触摸 屏 。 


你 还 需要 确保 网 站 是 人 人 都 可 访问 (无 障碍 ) 的 。 对 此 要 考虑 大 量 细 节 ， 例 如 如 果 网 站 是 
通过 颜色 来 传达 信息 的 ， 请 确保 色盲 用 户 不 会 错过 任何 重要 的 信息 。 

















决定 网 站 支持 哪些 设备 取决 于 你 的 资源 。 最 好 是 用 实际 设备 进行 测试 ， 如 果 做 不 到 ， 可 以 
用 仿真 器 或 模拟 器 。 




















在 考虑 过 用 户 和 用 户 使 用 的 设备 之 后 ， 我 们 将 跳 回 到 设计 中 。 在 下 一 章 中 ， 我 们 将 讲述 在 
响应 式 网 站 中 如 何 进 行文 字 排 版 。 




















第 四 部 分 





设计 响应 式 网 站 


第 9 章 


文字 排版 





网 站 意味 着 交流 ， 向 人 们 传播 信息 。 虽 然 有 些 信息 可 用 图 像 传 这 ， 但 大 多 数 信息 还 是 通过 
文字 来 传达 的 。 

网 页 上 的 文字 对 于 信息 的 有 效 传播 是 如 此 重要 ， 因 此 请 务必 确保 文字 易于 阅读 且 具 有 视觉 
吸引 力 。 

我 们 的 目标 不 仅仅 是 使 文字 样式 好 看 ， 符 合 网 站 的 整体 设计 风格 ， 更 要 为 阅读 文字 的 用 户 
创建 尽 可 能 好 的 用 户 体验 。 

在 设计 网 站 时 ， 我 们 往往 把 网 页 上 的 文字 看 作 是 静态 的 ， 就 像 杂 志 书 页 上 的 文字 一 样 ， 会 
对 其 视觉 外 观 进行 过 多 地 控制 ， 试 图 精确 控制 文本 与 页 面 上 其 他 内 容 项 的 排列 方式 ， 以 及 
字 与 字 相 互 之 间 的 视觉 效果 。 

















在 某 种 程度 上 ， 我 们 这 么 做 无 可 厚 非 。 但 在 创建 响应 式 网 站 时 ， 我 们 不 应 再 对 文本 进行 过 
度 的 精确 控制 (精确 往往 意味 着 缺乏 灵活 性 )， 而 是 应 该 在 设置 文本 样式 时 使 之 无 论 设计 
和 布局 怎样 变化 都 能 有 良好 的 显示 效果 ， 甚 至 文本 内 容 不 是 显示 在 我 们 设计 的 网 页 之 上 。 


在 本 章 中 ， 我 们 将 首先 学 习 向 网 站 添加 字体 的 相关 基本 知识 ， 接 着 将 讲述 如 何 设置 文本 的 
字体 大 小 ， 以 及 什么 样 的 度量 单位 才 最 适合 响应 式 网 站 ， 然 后 分 析 行 长 (一 行文 本 所 容纳 
的 字数 ) 是 如 何 影响 可 读 性 的 ， 并 向 示例 站 点 添加 媒体 查询 来 演示 不 管 视 口 宽度 是 多 少 都 
能 将 行 长 保持 在 推荐 的 范围 内 。 最 后 ， 我 们 将 对 文字 排版 进行 更 深入 的 讨论 ， 比 如 留 白 以 
及 根据 屏幕 尺寸 的 变化 你 应 在 何 时 对 字 型 进行 调整 。 
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9.1 始 于 HTML 


当 你 在 芳 虑 文字 在 屏幕 上 的 显示 效果 时 ， 你 可 能 想到 的 第 一 件 事 就 是 用 CSS 设置 文字 的 字 
体 大 小 、 字 型 、 颜 色 等 。 


但 事实 上 ， 对 文字 施加 样式 需要 从 HTML 开始 。 记 住 ， 阅 读 你 内 容 的 用 户 所 看 到 的 文字 可 
能 并 没有 应 用 你 网 站 的 CSS。 它 们 可 能 是 在 一 个 无 法 正确 显示 或 根本 不 能 显示 CSS 的 设备 
上 ， 比 如 可 能 使 用 的 是 会 除去 原 所 有 样式 的 RSS 阅读 器 或 类 似 Instapaper 的 服务 ， 或 者 用 
户 是 通过 屏幕 阅读 器 的 大 声 朗读 来 听 文 本 的 。 
































正如 我 们 在 本 书 的 前 面 章 节 所 讲 的， 在 CSS 对 用 户 不 可 用 的 情况 下 ， 文 本 需要 用 正确 的 
HTML 元 素 标记 。 如 果 CSS 不 可 用 ， 浏 览 器 将 对 «hl» 和 <strong> 这 样 的 HTML 元 素 
使 用 默认 样式 ， 以 确保 文字 对 用 户 仍然 是 可 读 和 可 用 的 。 








rA 
9.2 FÆ 
字 型 (typeface) 是 一 个 网 站 最 重要 的 视觉 元 素 之 一 。 字 型 会 改变 信息 的 基调 ， 这 反 过 来 又 
会 影响 信息 的 解读 。 
此 外 ， 选 择 的 字 型 是 否 合适 也 会 影响 到 网 站 内 容 的 易 读 性 。 错 误 的 字 型 可 能 导致 信息 的 传 
达 变 得 困难 。 























网 站 可 以 使 用 多 种 字 型 。 只 要 它们 能 和 谐 共处 ， 不 对 信息 造成 视觉 干扰 ， 那 么 使 用 多 种 字 
型 并 无 不 妥 。 

一 般 来 说 ， 应 为 正文 〈 即 段落 文本 等 ) 选择 一 个 简洁 易 状 读 的 字 型 ， 目 的 是 使 正文 文字 尽 
可 能 地 容易 阅读 。 

在 对 正文 字 型 进行 选择 时 ， 应 在 不 同 的 设备 上 以 你 计划 使 用 的 字体 大 小 来 测试 文本 是 否 容 
易 阅读 ， 并 且 要 以 大 段 的 文本 来 进行 测试 ， 而 不 只 是 几 句 话 而 已 。 

对 于 标题 ， 你 有 更 大 的 选择 余地 。 因 为 标题 文本 通常 比较 大 ， 字 型 能 够 表现 出 更 多 的 细节 
和 个 性 。 
测试 标题 字 型 时 ， 应 使 用 可 能 会 实际 用 在 网 站 上 的 标题 文本 来 测试 。 因 为 即使 字体 大 小 相 


同 ， 文 本 的 宽度 也 会 随 字 型 的 不 同 而 不 同 ， 所 以 要 考虑 选择 的 字 型 是 否 会 在 页 面 上 占用 太 
多 的 水 平 空间 。 较 窗 的 字 型 可 避免 标题 因 太 宽 而 自动 换行 。 


要 想 选 出 屏幕 显示 效果 良好 并 能 彼此 和 谐 共处 的 字 型 有 很 多 要 萎 虑 的 因素 ， 在 本 书 中 不 可 
能 一 一 展开 来 讲 。 欲 对 此 有 更 深入 的 了 解 ， 可 以 参考 以 下 资料 : 










































































e Jason Santa Maria A X T A List Apart 上 的 文章 “On Web Typography" (http://alistapart. 
com/article/on-web-typography) ; 

e Richard Rutter 的 X: 3€ "The Elements of Typographic Style Applied to the Web" (http:// 
webtypography.net/toc/) 。 


[ 小 贴 士 ] 


虽然 单词 font (字体 ) 和 typeface ( FA ) 通常 可 以 互 换 使 用 ， 但 它们 的 含义 实际 上 是 不 同 
的 。 字 型 是 一 套 设计 好 的 字母 、 数 字 和 符号 ， 比 如 Helvetica 或 Times New Roman 字 型 。 





而 字体 实际 上 指 的 是 保存 在 你 的 电脑 或 网 站 上 的 用 于 在 屏幕 上 生成 文字 的 电子 文件 ， 你 可 
以 认为 它们 的 区 别 就 像 是 一 首 歌 和 一 个 MP3 文件 的 区 别 。 


在 本 章 的 后 面部 分 ， 我 们 将 学 习 如 何 设置 文本 的 不 同 CSS 属性 ， 如 font-size 和 line- 
length， 使 其 更 易于 阅读 。 











但 在 开始 学 习 这 些 属 性 之 前 ， 首 先 需 要 决定 网 站 使 用 的 字 型 。 虽然 我 们 可 以 设置 文字 的 字 
体 大 小 ， 但 不 同 的 字 型 在 字体 大 小 相同 的 情况 下 在 屏幕 上 所 占用 的 空间 是 不 同 的 。 








例如 ， 在 图 9-1 中 显示 的 是 文本 相同 ， 字 体 大 小 相同 ， 但 字 型 不 同 的 10 行文 本 。 因 为 所 选 
字 型 不 同 ， 每 个 字符 的 实际 大 小 略 有 不 同 ， 行 的 长 度 也 因此 而 不 同 。 如 果 设 计 的 网 站 已 将 
行 长 控制 在 最 佳 范围 内 ， 之 后 又 改变 了 字 型 ， 那 么 行 长 会 随 之 改变 ， 你 将 不 得 不 从 头 开始 
设计 ! 


























Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac nunc lacus. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac nunc lacus. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac nunc lacus. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac nunc lacus. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac nunc lacus. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac nunc lacus. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac nunc lacus. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac nunc lacus. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac nunc lacus. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac nunc lacus. 











9-1: 不 同 的 字 型 在 字体 大 小 相同 的 情况 下 所 占据 的 水 平 空间 是 不 同 的 


有 成 千 上 万 种 字体 可 供 我 们 用 在 自己 的 网 站 中 ， 在 本 章 的 后 面部 分 ， 我 们 将 讲述 在 哪里 可 
以 找到 免费 或 收费 的 字体 ， 以 及 如 何在 网 站 中 使 用 它们 。 
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o] 

9.3 ”使 用 字体 

过 去 ， 设 计 师 在 网 站 中 使 用 的 字体 只 能 是 已 经 安装 在 用 户 电脑 里 的 字体 。 但 除了 极 少 数 存 在 
于 所 有 操作 系统 中 字体 ， 我 们 没 办 法 知道 用 户 还 安装 有 哪些 字体 ， 所 以 你 的 选择 非常 有 限 。 
CSS3 的 发 布 使 我 们 能 够 将 字体 租 进 网 站 中 ， 这 意味 着 网 站 可 以 链接 一 个 文件 ， 其 包含 了 
显示 给 定 字体 所 需 的 全 部 信息 。 因 此 当 用 户 查 看 网 站 时 ， 他 所 用 的 设备 将 能 够 显示 你 所 链 
接 的 字体 (与 安装 在 用 户 设 备 上 的 默认 字体 一 样 )。 
字体 文件 可 以 与 其 他 网 站 资源 一 道 托管 在 你 自己 的 服务 器 上 ( 记 住 ， 字体 是 数字 文件 )， 
或 者 可 以 使 用 字体 服务 网 站 ， 其 允许 你 链接 它 服务 器 上 的 字体 文件 。 


线 上 字体 (Web font) 在 各 种 设备 上 的 显示 效果 会 有 所 不 同 ， 所 以 你 应 如 往常 一 样 ， 在 不 
同 的 设备 上 对 其 进行 必要 的 测试 。 


9.3.1 设计 良好 的 字体 
现在 ,一 切 都 电子 化 (数字化) 了 ， 很 容易 获得 成 千 上 万 可 用 在 网 站 上 的 字体 。 甚 至 有 大 
量 的 免费 字体 ， 但 需要 注意 的 是 ， 免 费 字体 的 质量 良 葬 不 齐 ， 正 所 谓 一 分 钱 一 分 货 。 


























— 

















字 型 是 由 字 型 设计 师 (type designer) 设计 的 。 设 计 字 型 是 一 项 艰苦 繁琐 的 工作 ， 不 是 说 只 
要 简单 地 把 每 个 字母 (笔画 ) 的 样式 设计 出 来 就 行 了 。 

实际 上 单个 字母 的 设计 并 不 是 最 困难 的 部 分 。 环 手 之 处 在 于 如 何 使 单个 字母 在 文本 块 中 能 
很 好 地 组 合 在 一 起 ， 字 母 与 字母 之 间 的 空间 ( 字 间 距 ) 应 根据 不 同 的 字母 组 合 而 有 不 同 的 
设 定 。 

如 果 使 用 的 是 制作 粗糙 的 字体 ， 在 字母 组 合成 单词 和 句子 时 你 会 注意 到 其 与 设计 良好 字体 
之 间 的 差异 。 其 字 间 距 看 上 去 是 不 正确 的 。 

在 购买 字体 时 ， 要 先 在 你 的 屏幕 上 观察 文本 块 样本 的 显示 效果 。 只 是 浏览 字符 从 A S ZH 
独 排 列 时 的 显示 效果 来 确定 字体 是 否 适 用 并 不 可 靠 。 


9.3.2 自 托 管 字体 

托管 自己 的 线 上 字体 并 不 困难 。 

首先 我 们 要 获得 需要 的 字体 文件 ， 可 以 是 购买 收费 字体 ， 也 可 以 使 用 以 下 网 站 来 搜索 免费 
字体 〈 主 要 是 看 它们 的 线 上 字体 部 分 ， 因 为 它们 可 能 也 提供 用 在 电脑 上 的 字体 下 载 ， 而 那 
并 不 是 我 们 需要 的 ) 。 







































































e Font Squirrel (http://www.fontsquirrel.com) 


所 有 字体 都 免费 ， 包 括 商业 用 途 。 


e MyFonts (http://www.myfonts.com/info/webfonts/) 
提供 超过 60,000 种 字体 ， 基 于 页 面 访问 量 收费 。 


e Fonts.com (http://www.fonts.com/web-fonts/self-hosting ) 
基于 页 面 访问 量 收费 。 








下 载 的 字体 文件 通常 是 一 个 ZIP 压缩 文件 。 压 缩 包 中 一 般 包 括 数 种 格式 的 字体 文件 ， 通 常 
也 会 有 一 个 内 含 使 用 许可 的 文本 文件 。 

将 获得 的 字体 文件 上 传 到 我 们 的 网 站 中 即 完 成 了 自 托 管 的 工作 。 在 本 市 后 面 的 9.3.4 市 中 ， 
你 将 学 习 如 何 使 用 CSS 将 字体 样式 应 用 于 网 站 的 文本 。 


9.3.3 字体 服务 


使 用 字体 服务 通常 比 自己 托管 字体 更 容易 。 虽 然 有 一 些 免费 的 字体 服务 ， 但 通常 人 们 会 按 
数量 
IL. 




















月 或 按 年 支付 字体 使 用 费用 。 收 费 方 式 多 样 ， 可 以 根据 使 用 的 字体 〈 字 型 ) 或 使 用 
字体 服务 的 公司 帐号 下 的 用 户 数 ， 或 网 站 在 一 段 时 间 内 下 载 字 体 所 耗费 的 网 络 流量 
字体 服务 会 提供 一 个 在 线 接口 ， 可 根据 各 种 选项 和 设置 来 选择 你 网 站 需要 的 字体 ， 选 好 之 
百 会 得 到 需要 加 到 你 的 网 站 中 的 CSS 5 (或) JavaScript 代码 。 在 加 入 代码 后 ， 只 需 在 要 
使 用 该 字体 的 样式 中 将 字体 名 称 添 加 到 font-family 声明 中 即 可 。 











Ho ~ 
o 

















下 面 列 出 的 是 当前 流行 的 一 些 字体 服务 ， 你 可 在 限定 的 页 面 浏 览 量 或 时 间 段 内 免费 在 自己 
的 网 站 上 对 字体 进行 测试 。 除 了 免费 的 Google Web Fonts， 其 他 网 站 通常 是 基于 页 面 浏览 
量 和 使 用 字体 服务 的 网 站 数目 收费 的 ， 最 低 只 要 每 年 儿 美元 。 




















* Google Web Fonts (http://www.google.com/webfonts) 
免费 ，600 多 个 字体 系列 可 用 。 所 有 字体 开源 且 不 限制 用 途 ， 包 括 商 业 项 目 。 


* FontDeck (http://fontdeck.com) 
按 每 种 字体 收取 年 费 。 


e Fonts.com (http://www.fonts.com/web-fonts) 


两 万 种 字体 可 用 ， 多 种 收费 方案 。 


e Typekit (https://typekit.com) 
数 千 种 字体 可 用 ， 多 种 收费 方案 。 
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e Web Ink (http://www.webink.com) 
数 千 种 字体 可 用 ， 多 种 收费 方案 。 


e Webtype (http://www.webtype.com) 
按 每 种 字体 收取 年 费 。 


在 测试 字体 时 还 可 使 用 以 下 在 线 服务 。 








* Typecast (http://typecast.com) 
其 允许 你 在 浏览 器 中 轻松 地 测试 和 比较 字体 ， 按 月 收费 ， 可 免费 试用 14 天 。 


9.3.4 ”链接 字体 文件 

无 论 是 自 托管 字体 文件 ， 还 是 使 用 字体 服务 ， 都 需要 让 CSS 知道 有 哪些 字体 可 在 网 站 中 使 
用 。 为 此 ， 需 要 使 用 @font-face 属性 声明 字体 。 这 是 一 个 要 首先 完成 的 单独 步骤 ， 这 样 
你 才 可 以 将 这 些 字体 用 于 设置 网 站 元 素 的 样式 。 





如 果 使 用 的 是 字体 服务 ， 它 会 提供 使 用 服务 的 代码 ， 通 常 与 下 面 我 们 所 使 用 的 代码 类 似 。 


如 果 是 下 载 字体 文件 自己 托管 ， 也 可 能 会 提供 有 使 用 代码 ， 你 只 需要 改变 URL 中 的 目录 
名 即 可 。 将 字体 文件 上 传 到 网 站 上 选 定 的 目 孙 中 ， 这 样 它 们 就 能 被 链接 使 用 了 。 


























你 的 代码 应 该 类 似 于 下 面 的 代码 。 将 此 代码 添加 到 你 的 第 一 个 样式 表 的 最 前 面 〈 或 靠近 最 
前 面 )， 因 为 在 开始 用 该 字体 样式 化 文本 之 前 ， 需 要 先 将 其 下 载 到 用 户 电 脑 上 : 















































@font-face { 
font-family: WebFontName; 
src: url('WebFontName.otf'); 


) 
几 个 关键 点 说 明 如 下 。 





。 在 font-family 中 指定 的 是 将 在 样式 表 的 其 他 地 方 引 用 的 字体 名 。 理 论 上 ， 我 们 可 以 
随意 命名 ， 但 通常 应 使 用 其 实际 字体 名 。 

。 如 果 font-family 中 指定 的 字体 名 包含 多 个 单词 ， 则 要 用 单 引 号 包 起 来 ( 即 web 
Font Name), 

。 确保 链接 字体 文件 的 URL 中 的 路 径 与 字体 文件 在 网 站 上 的 位 置 一 致 ， 例 如 URL (../ 


fonts/WebFontName.otf), 














前 面 的 代码 仅 包 含 一 个 字体 文件 ， 但 通常 每 种 字体 会 链接 多 个 文件 ， 因 为 不 同 的 操作 系统 
支持 的 字体 文件 格式 是 不 同 的 。 所 以 ， 实 际 的 代码 可 能 更 像 这 样 : 




















@font-face ( 
font-family: WebFontName; 
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src: url('WebFontName.eot'); 

src: url('WebFontName.eot?HZiefix') format('embeddedopentype'), 
url('WebFontName.woff') format('woff'), 

'WebFontName.ttf') format('truetype'), 
url('WebFontName.svgttwebfont') format ('svg'); 

font-weight: normal; 

font-style: normal; 


} 
对 于 提供 了 多 种 格式 的 同一 字体 ， 浏 览 器 将 使 用 它 支持 的 那 种 格式 。 


要 想 获得 浏览 器 器 支持 的 字体 文件 格式 列表 ， 可 查看 由 Zoe Mickley Gillenwater 摘录 自 
Stunning CSS3: A Project-Based Guide to the Latest in CSS 的 “@font-face File Types Browser 


url 


Support — X (http//www.stunningcss3.com/resources/fontface-file-types-browser-support.html ) 。 


9.3.5 ”创建 字体 栈 

在 为 HTML 元 素 设置 字体 时 ， 我 们 将 使 用 font-family 属性 。 在 这 个 CSS 声明 中 应 包含 
多 种 字体 ， 因 为 你 需要 有 一 种 候补 字体 ， 以 防 前 面 定义 的 字体 由 于 某 种 原因 不 能 加 载 (Eb 
如 字体 文件 链接 错误 或 者 托管 主机 临时 宕 机 ) 。 


浏览 器 将 按 顺序 检查 列表 ， 使 用 第 一 个 可 用 的 字体 ， 所 以 应 以 选 定 的 字体 开始 ， 后 面 跟着 
候补 字体 。 这 种 字体 选择 列表 俗称 字体 栈 (font stack)。 


列表 中 的 最 后 一 项 应 该 是 一 个 通用 的 字体 系列 ， 通 常 是 serif ( 衬 线 字体 系列 ) 或 sans- 
serif (无 衬 线 字体 系列 )， 这 将 引用 设备 上 该 字体 系列 所 对 应 的 系统 默认 字体 。 这 完全 是 
作为 一 种 候补 手段 ， 很 少 被 浏览 器 所 使 用 ， 设 置 它 只 是 为 了 以 防 万 一 。 

字体 名 称 必须 完全 匹配 efont -face 中 声明 的 字体 名 。 如 果 字 体 名 由 多 个 单词 组 成 ， 需 包 
含 在 单 引 号 中 。 


在 接 下 来 的 例子 中 ， 我 们 选择 Helvetica Neue 作为 正文 字体 。 如 果 由 于 某 种 原因 该 字体 不 
可 用 ， 浏 览 器 会 试图 寻找 Helvetica 字体 ， 然 后 是 Arial 字体 (两 者 都 是 安装 在 设备 上 的 常 
用 字体 )。 如 果 这 些 都 不 可 用 ,浏览 器 将 以 其 默认 的 sans-serif FARE: 



















































































body { font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; } 


在 选择 将 font-family 应 用 于 哪 一 个 元 素 时 ， 通 常 ， 你 会 设置 一 种 字体 应 用 于 网 站 的 绝 
大 多 数 元 素 。 所 以 将 此 字体 应 用 于 你 的 «body» 元 素 ， 然 后 在 需要 时 对 其 他 元 素 使 用 不 同 
的 字体 。 














通常 ， 候 补 字体 应 尽量 与 正 选 字体 类 似 ， 这 样 在 万 一 使 用 了 候补 字体 的 情况 下 页 面 的 显示 
效果 不 会 看 起 来 完全 不 同 。 应 用 字体 栈 中 的 每 种 字体 来 测试 你 的 网 站 ， 以 确保 不 管 是 使 用 
哪 种 字体 ， 都 有 好 的 页 面 显示 效果 。 例 如 ， 如 果 所 选 的 某 个 字体 的 字符 较 宽 ， 可 能 会 改变 
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页 面 上 文本 元 素 的 最 佳 行 长 ， 或 使 标题 拆 分 成 多 行 。 

创建 字体 栈 时 ， 可 以 包括 的 字体 有 : 

。 任意 已 使 用 font-face 链接 的 线 上 字体 ,无论 是 通过 字体 服务 还 是 自 托 管 于 你 的 网 站 ， 
。 任意 已 安装 在 用 户 设备 上 的 字体 。 参 见 Scott Granneman 列 出 的 每 种 操作 系统 的 “默认 


字体 ”(http://www.granneman.com/webdev/coding/css/fonts-and-formatting/default-fonts/) ; 
。 通过 使 用 serif 和 sans-serif 指定 的 浏览 器 通用 字体 系列 。 




















一 些 老 的 浏览 器 不 支持 使 用 font-face 链接 字体 文件 ， 因 此 需要 包括 系统 字体 作为 候补 
选项 。 


9.4 调整 文字 大 小 


即便 你 从 不 对 文本 应 用 样式 ， 也 需要 注意 文本 的 大 小 ， 并 确保 它 合乎 设计 要 求 ， 易 于 用 户 
阅读 。 响 应 式 设计 的 一 个 优点 是 你 可 以 按 比例 而 不 是 绝对 值 来 设置 文本 的 大 小 ， 这 样 ， 文 
字 的 大 小 可 以 与 视 口 的 大 小 相 匹 配 。 


9.4.1 忘掉 像素 
我 们 可 以 用 像素 单位 来 设置 文本 大 小 。 在 这 之 前 ， 像 素 一 直 都 是 一 个 合适 的 设置 文本 大 小 
的 方式 ， 因 为 它 是 一 个 固定 的 单位 ， 不 管 你 的 电脑 所 连接 的 显示 器 有 多 大 。 


但 现在 像素 已 变 得 不 再 适用 了 。 如 今 的 技术 可 把 像素 做 得 很 小 ， 高 密度 屏幕 在 给 定 的 空间 
中 可 以 容纳 下 多 得 多 的 像素 点 ， 这 使 得 屏幕 的 显示 效果 非常 清晰 。 此 外 ， 像 素 的 数目 在 不 
同类 型 的 屏幕 上 也 各 不 相同 。 


因此 ， 像 素 不 再 是 一 种 在 所 有 设备 上 都 一 致 的 度量 单位 。 如 果 还 是 用 像素 做 度量 单位 ， 你 
的 设计 可 能 在 目前 的 大 多 数 设 备 上 显示 效果 仍然 不 错 。 但 以 后 各 种 各 样 的 设备 会 越 来 越 多， 
将 来 还 会 发 明 出 各 类 新 设备 ， 因 而 我 们 无 法 相信 像素 度量 单位 仍 能 继续 如 期 望 的 那样 工作 。 
如 果 你 想 让 网 站 是 响应 式 的 ， 并 在 所 有 屏幕 尺寸 和 设备 类 型 上 都 有 良好 的 显示 效果 ， 那 
么 ， 请 舍弃 像素 并 使 用 相对 度量 单位 。 
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9.4.2 ”屏幕 距离 


男 一 件 要 考虑 的 事 是， 即使 你 认为 像素 在 所 有 设备 上 都 是 一 致 的 ， 但 实际 上 也 并 非 如 此 ， 
因为 设备 制造 商会 考虑 到 生产 的 屏幕 在 使 用 中 大 概 距 用 户 的 脸 有 多 远 。 你 的 眼睛 离 屏幕 越 
近 ， 文 字 看 起 来 就 越 大 。 


我 们 可 以 做 个 试验 ， 举 起 你 的 iPhone (其 屏幕 宽度 是 320 像素 ) ， 靠 近 电 脑 ， 电 脑 屏幕 上 
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有 一 个 调整 成 320 像素 宽 的 浏览 器 窗口 ， 你 会 惊讶 地 发 现 ， RAAE 320 像素 ， 但 它们 的 
显示 面积 是 不 同 的 。 如 图 9-2 所 示 。 





WORDPRESS.ORG 


WORDPRESS.ORG 





Ready to get started? 


Download WordPress Ready to get started? 


Download WordPress 





图 9-2. 同样 的 320 像素 宽 的 网 站 在 不 同 设 备 上 物理 尺寸 是 不 一 样 的 


如 有 果 你 把 两 者 并 排放 在 一 起 ， 电 脑 上 的 文字 无 颖 更 大 ， 这 是 必须 的 ， 因 为 电脑 显示 器 通常 
离 你 的 眼睛 更 远 。 











在 大 多 数 情况 下 ， 你 无 需 对 此 担心 ， 设 备 制造 商 通常 都 已 将 此 调 校 好 。 但 是 ， 事 物 总 有 了 
乎 意料 的 时 候 ， 所 以 你 需要 对 各 种 设备 和 屏幕 尺寸 进行 测试 ， 来 确保 不 管 屏 幕 尺 寸 是 多 
大 ， 文 本 的 大 小 都 是 合适 的 、 易 于 阅读 的 。 











上 上 








阅读 Wilson Minor HJ "Relative Readability” (http://wm4.wilsonminer.com/posts/2008/oct/20/ 
relative-readability/) 以 获得 更 多 有 关 字 体 大 小 和 阅读 距离 的 信息 。。 


9.4.3 绝对 与 相对 
像素 是 一 个 绝对 度量 单位 ， 绝 对 度量 单位 拥有 一 套 定义 使 得 其 度量 值 所 表示 的 大 小 在 不 同 
的 场景 下 被 认为 总 是 相同 的 。 另 一 方面 ， 相 对 度量 单位 ， 在 定义 了 一 个 起 始点 之 后 ， 与 其 
他 值 之 间 是 彼此 相对 的 关系 。 

















不 管 是 以 像素 为 单位 设计 网 页 ， 亦 或 是 在 文字 处 理 软件 里 设置 文档 中 文本 的 大 小 ， 我 们 都 
习惯 于 使 用 绝对 度量 单位 。 文 本 都 是 通过 设置 的 数字 度量 值 来 确定 其 大 小 的 ， 比 如 网 页 中 
的 14 像素 ， 文 字 处 理 软件 中 的 12 磅 ， 或 者 是 广告 牌 设计 中 的 3 英尺 。 











当 使 用 的 是 固定 大 小 的 画布 时 (比如 纸张 )， 画 布 的 大 小 是 绝 不 会 改变 的 。 但 对 于 一 个 网 
站 ， 画 布 的 大 小 会 随 屏幕 的 大 小 而 发 生变 化 ， 所 以 需要 使 网 页 文本 的 大 小 具有 灵活 性 ,在 
必要 时 可 以 随同 屏幕 尺寸 一 起 改变 。 





因此 ， 响 应 式 设计 采用 em 和 rem 这 样 的 相对 单位 来 代替 像素 那样 的 绝对 单位 。 相 对 度量 
单位 简单 地 说 就 是 其 数字 度量 值 所 表示 的 大 小 是 相对 于 其 他 事物 的 大 小 来 说 的 。 我 们 将 很 
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快 对 此 进行 深入 的 探讨 。 

如 果 你 曾经 从 事 响应 式 网 站 相关 的 工作 ， 你 可 能 已 经 知道 ， 可 以 用 一 个 公式 将 所 有 以 像素 
单位 表示 的 字体 大 小 转换 成 以 响应 式 单位 em 表示 。 

虽然 用 公式 能 很 方便 地 将 现 有 的 基于 像素 的 网 站 转换 为 响应 式 网 站 ， 但 它 不 应 作为 一 种 可 


持续 的 处 理 网 站 的 方法 。 像 素 已 不 再 是 我 们 可 以 倚赖 的 度量 单位 ， 你 须要 完全 停止 再 考虑 
以 像素 为 单位 来 设置 文本 的 大 小 。 


在 本 书 中 ， 我 们 一 直 强 调 在 设计 中 直接 使 用 相对 单位 ， 而 不 是 从 像素 间接 转换 过 来 。( 如 
果 需 要 转换 现 有 网 站 ， 本 章 的 后 面部 分 将 告诉 你 如 何 做 。) 














9.4.4 ”设置 默认 字体 大 小 
在 设置 网 站 文本 的 样式 时 ， 通 常 首 先 要 做 的 是 为 网 站 设置 默认 字体 大 小 。 记 住 ， 网 站 中 的 
所 有 度量 单位 都 应 是 相对 的 ， 全 都 相对 于 默认 字体 大 小 。 


但 是 以 什么 值 作为 设置 的 起 点 呢 ? 其 实 很 简单 ， 每 个 浏览 器 都 能 设置 自己 的 默认 字体 大 
小 ， 并 且 每 个 浏览 器 会 选择 一 个 合适 的 默认 字体 大 小 ， 大 到 足以 使 文本 对 于 大 多 数 用 户 来 
说 都 易于 阅读 。 以 此 开始 设置 你 的 文本 ， 所 有 你 需要 做 的 就 是 将 «body» 元 素 的 字体 大 小 
设置 为 100%。 你 可 能 已 经 在 重 置 CSS 时 这 样 做 了 : 


























body { font-size: 100$; } 











设置 文档 的 默认 字体 大 小 是 我 们 唯一 一 次 使 用 百分比 设置 字体 大 小 。 其 他 所 有 地 方 都 将 以 
em 或 rem 为 单位 ， 所 设置 的 值 都 是 相对 于 基本 字体 大 小 来 说 的 。 


如 果 你 好 奇 100% 是 多 大 ， 可 以 创建 一 个 测试 页 面 来 在 浏览 器 中 查看 它 。 对 于 大 多 数 设备 ， 
默认 字体 大 小 是 16 像素 〈 原 谅 我 刚 说 了 不 再 考虑 使 用 像素 )， 如 有 果 你 此 刻 不 想 打开 浏览 
器 ， 你 可 能 会 在 脑海 中 想 16 像素 看 上 去 有 多 大 。 










































































有 一 些 设备 会 有 不 同 的 默认 字体 大 小 。 例 如 ，Kindle Touch 浏览 器 的 默认 字体 大 小 是 26 像 
素 ， 因 为 它 的 屏幕 像素 密度 较 高 。 但 Kindle Touch 上 26 像素 的 文本 看 上 去 类 似 于 其 他 设 
备 上 16 像素 的 文本 。 


字体 使 用 相对 大 小 的 优势 在 于 如 果 要 改变 网 站 上 所 有 文本 的 字体 大 小 ， 你 只 需 改变 基本 字 
体 大 小 即 可 ， 所 有 其 他 文本 的 大 小 会 随 之 改变 ， 但 它们 仍 会 维持 原来 的 相对 比例 。 




















9.4.5 为 什么 是 100% 


尽管 在 上 一 市 中 我 们 在 font-size 中 使 用 100% 作为 «body» 元 素 的 字体 大 小 ， 但 实际 上 
可 以 使 用 任何 希望 的 百分比 值 。 然 而 100% 却 更 为 合适 ， 正 如 我 前 面 提 到 的 ， 浏 览 器 厂商 
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已 经 确定 了 网 站 上 的 文本 要 多 大 才能 使 其 对 于 大 多 数 用 户 来 说 是 容易 阅读 的 ， 这 个 大 小 就 
是 我 们 设置 为 100% 所 得 到 的 大 小 。 





不 过 ， 在 设置 网 站 的 默认 字体 大 小 为 100% 后 ， 你 可 能 会 觉得 它 看 上 去 太 大 了 。 因 为 你 已 
经 看 习惯 了 网 站 上 那些 细小 的 文字 。 在 这 之 前 ， 很 少 有 网 站 会 把 正文 文字 设置 成 那么 大 。 
但 最 近 几 年 ， 许 多 网 站 已 经 开始 转向 去 使 用 更 大 的 文字 。 


令 人 惊讶 的 是 ， 对 此 争议 一 直 存 在 ， 尤 其 是 在 网 页 设计 博客 中 争论 更 甚 。 难 以 置信 会 有 这 
么 多 网 页 设计 师 抱 怨 网 站 上 的 文本 变 得 太 大 了 ， 就 像 它 是 对 设计 师 的 人 格 侮 硅 似 的 。 





























的 确 ， 对 于 很 多 用 户 来 说 ， 文 字 并 不 需要 那么 大 。 但 是 ， 对 于 另外 的 很 多 人 来 说 ， 大 号 文 
本 是 一 个 巨大 的 解脱 。 如 果 你 视力 不 好 ， 网 页 上 的 小 号 文本 可 能 很 难 阅 读 。 据 统计 ， 人 的 
视力 在 40 岁 左右 就 会 减退 ， 从 而 使 得 阅读 小 号 文字 越 来 越 吃 力 。 我 还 没 40 岁 ， 但 我 已 经 
感觉 到 很 多 网 站 的 文字 太 小 了 ， 阅 读 起 来 有 些 困难 。 




















实际 上 在 大 多 数 浏 览 器 中 可 通过 快捷 键 Command-+ (Windows 中 是 Ctrl-+) 来 放大 网 页 上 
的 文字 。 在 文字 较 小 的 网 站 中 我 会 经 常 使 用 它 ， 我 宁可 放大 文本 来 舒服 地 阅读 ， 也 不 愿 去 
时 着 眼看 小 字 。 


一 些 网 页 设计 师 会 辩 称 ， 因 为 用 户 可 以 自己 选择 去 放大 文本 ， 根 本 就 没有 必要 去 设计 足够 大 
的 易于 阅读 的 文本 。 但 你 猜 怎 么 着 ? 不 是 每 个 人 都 知道 可 以 使 用 Command-+ 来 放大 文本 。 








而 且 即 使 用 户 能 这 么 做 ， 但 保证 一 个 网 站 可 用 不 是 用 户 的 责任 ， 而 应 该 是 设计 师 的 责任 。 
所 以 应 先 设置 基本 字体 大 小 为 100%， 以 使 大 多 数 用 户 都 能 轻松 阅读 页 面 上 的 文本 。 当 然 ， 并 
不 是 说 所 有 内 容 文 本 都 要 那么 大 ， 你 可 以 使 用 下 面 将 要 讲述 的 相对 度量 单位 使 某 些 元 素 中 的 
文本 〈 比 如 页 脚 ) 稍微 小 些 。 但 网 站 中 的 正文 文本 应 该 至 少 是 浏览 器 默认 字体 大 小 的 100%。 



































如 果 你 仍 觉得 100% 大 小 的 文本 看 上 去 太 大 了 ， 这 可 能 只 是 因为 你 的 其 他 设计 部 分 ， 比 如 
留 白 或 图 像 ， 与 文字 的 大 小 不 成 比例 。 就 文字 而 言 ， 如 果 你 无 法 确定 其 大 小 ， 大 文本 总 是 
更 为 合适 。 





























9.4.06 ”度量 单位 
文字 可 使 用 几 种 不 同 的 度量 单位 。 

在 文字 处 理 软件 中 编辑 文本 时 你 一 般 是 将 磅 (point) 用 作 单 位 ， 普 通 文本 可 能 为 10 磅 或 
12 磅 。1 磅 表示 1/72 英寸 ， 因 此 ，12 磅 文本 就 是 1/6 oh, F (pica) 是 一 个 相关 术 
语 ，1 派 卡 就 是 12 磅 。 


在 网 站 中 ， 你 可 能 习惯 于 使 用 像素 。 一 个 像素 理论 上 是 1/96 英寸 。 因 此 ，16 像素 文本 在 
大 多 数 显示 器 上 是 1/6 英寸 大 小 。 
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对 于 响应 式 网 站 ， 我 们 将 使 用 一 个 你 可 能 不 太 熟 悉 的 度量 单位 : em， 其 使 你 能 调整 字体 大 
小 来 适 配 显 示 器 。 





1. em 


一 个 em 等 于 一 个 元 素 当前 的 字体 大 小 。 对 于 em 的 更 详细 说 明 ， 参 考 第 4 章 中 的 “Em 。 


在 下 面 的 代码 示例 中 ，<p> 元 素 的 字体 大 小 为 1 em， 表 示 等 于 页 面 的 默认 字体 大 小 ， 在 
大 多 数 设 备 上 表现 为 16 像素 。<hl> 元 素 的 字体 大 小 为 1.5 em， 则 表示 是 默认 字体 大 小 的 
1.5 倍 (或 22 像素 )， 如 图 9-3 所 示 : 





body { font-size: 100$; } 
p { £ont-size: lem; ) 
hl ( font-size: 1.5em; } 


This is the heading 











This is the paragraph. 





9-3: 标题 文本 的 字体 大 小 是 段落 文本 的 1.5 倍 


如 果 你 现在 所 工作 的 网 站 需要 将 像素 转换 成 em， 只 需 将 数值 除 以 16 即 可 ， 因 此 16 像素 
等 于 1 em，32 像素 就 等 于 2 em。 如 果 嫌 计算 麻烦 ， 可 参考 设计 师 Jon Tan 制作 的 “Pixels 
to Ems Conversion Table for CSS" (http://v1.jontangerine.com/silo/css/pixels-to-ems/)， 其 中 
列 出 了 假设 默认 字体 大 小 为 100% 时 ， 各 像素 大 小 所 对 应 的 em f& 
































2. em 
在 使 用 em 作 度 量 单位 时 可 能 会 让 人 感到 困惑 的 一 点 是 ， 它 表示 的 相对 大 小 是 基于 父 元 素 
的 字体 大 小 ， 而 不 是 页 面 的 默认 字体 大 小 。 例 如 ， 假 设 我 们 有 以 下 代码 : 




















body { font-size: 100%; } 
p { font-size: 2em; } 
span { font-size: 1.5em; } 


<div>This is 1 em.</div> 
<p>This is 2 ems <span>(and 1.5 ems)</span>.</p> 





我 们 没有 对 <div> 元 素 设 置 字体 大 小 ， 所 以 它 将 继承 页 面 的 默认 大 小 1 em, 
我 们 设置 «p» 元 素 的 字体 大 小 为 2em， 所 以 段落 中 的 文本 将 两 倍 于 <div> 中 的 文本 。 


我 们 设置 «span» 元 素 的 字体 大 小 是 1.5 em， 但 它 并 不 是 基于 默认 字体 大 小 ， 而 是 基于 其 
包含 元 素 «p» 的 字体 大 小 ， 而 <p> 元 素 的 字体 大 小 是 2 em, Bb, «span» 元 素 的 字体 大 
小 是 1.5 乘 以 2， 也 就 是 3 em。 最 终 的 结果 如 图 9-4 所 示 。 



































This is 1 em. 


This is 2 ems (and 1.5 ems). 


9-4; «span» 中 的 文本 太 大 ， 因 为 其 font-size 值 乘 上 了 包含 元 素 的 font-size 值 

虽然 使 用 em 对 于 岁 套 在 其 他 元 素 中 的 元 素 的 字体 大 小 可 能 会 产生 一 些 意 想 不 到 的 结果 ， 
但 只 要 在 编写 CSS 代码 时 注意 一 下 ， 它 通常 不 会 是 个 问题 ， 我 们 应 只 对 需要 的 元 素 设置 
font-size， 而 并 非 所 有 元 素 。 




















3. rem 

另 一 个 可 用 于 设置 文本 字体 大 小 的 度量 单位 是 rem。 其 与 em 大 小 相同 ， 只 不 过 rem 是 基 
于 根 元 素 (<html>) 而 不 是 父 元 素 的 字体 大 小 。 它 比 em 好 用 ， 因 为 不 会 遇 到 像 em 那样 
的 和 瞬 套 元 素 的 字体 大 小 彼此 相 乘 的 问题 。 


当 使 用 rem 时 ， 需 要 在 <html> 元 素 上 设置 文档 的 字体 大 小 为 100% ， 而 不 是 像 使 用 em 时 
是 在 «body» 元 素 上 设置 : 














html { font-size: 100$; } 








不 过 ， 使 用 rem 也 有 一 个 缺点 ， 那 就 是 并 非 所 有 的 浏览 器 都 支持 它 。 特 别 是 IE8 及 其 更 早 
版 本 和 Opera Mini， 它 们 完全 无 法 识别 使 用 rem 为 单位 设置 的 字体 大 小 。 








解决 这 个 问题 有 两 个 办 法 。 


4. 使 用 回 退 值 
第 一 种 办 法 ， 如 果 想 确保 这 些 老 式 浏 览 器 能 按 预期 的 字体 大 小 来 显示 ， 那 就 需要 声明 一 个 
以 像素 为 单位 的 回 退 值 (fallback value), 


请 记 住 ， 如 果 对 于 一 个 元 素 的 同一 CSS 属性 有 两 个 声明 ， 浏 览 器 将 使 用 后 一 个 。 所 以 我 们 
需要 把 回 退 值 放 在 前 面 ， 而 把 rem 值 放 在 后 面 。 如 果 浏 览 器 能 够 识别 rem ， 它 将 使 用 第 二 
个 声明 ， 也 就 是 rem 值 。 如 果 它 不 能 识别 rem， 将 忽略 第 二 个 声明 而 使 用 第 一 个 声明 ， 也 
就 是 像素 值 : 












































p { font-size: 18px; font-size: 1.1rem; } 


要 算出 与 rem 或 em 等 效 的 以 像素 为 单位 的 字体 大 小 (基本 字体 大 小 是 100%) ， 只 需要 乘 
以 16, 
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[ 小 贴 士 ] 

那 为 什么 不 直接 以 em 为 单位 设置 回 退 值 ， 这 样 两 个 值 就 可 以 是 相同 的 了 ? 因为 以 em 为 单 
位 设置 回 退 值 你 同样 会 磁 到 误 套 元 素 字 体 大 小 会 彼此 相 乘 的 问题 ， 你 需要 去 确保 不 会 发 生 冲 
突 。 如 果 你 不 得 不 那么 处 理 ， 那 直接 用 em RA rem 好 了 。 











在 所 有 字体 大 小 声明 中 都 必须 包含 像素 回 退 值 意味 着 大 量 额 外 的 工作 。 还 好 有 另 一 个 更 容 
易 的 办 法 。 


5. 使 用 浏览 器 默认 值 

第 二 个 办 法 不 是 非常 精确 ， 但 却 很 简单 。 如 果 要 支持 使 用 IE8 及 其 更 早 版 本 的 用 户 你 可 能 
只 能 用 这 个 方法 。 而 且 即 使 你 不 打算 支持 这 些 老式 浏览 器 ， 仍 应 该 使 用 这 种 简便 的 方法 ， 
因为 它 会 对 网 站 的 可 用 性 产生 很 大 的 影响 。 

如 果 你 觉得 声明 回 退 字体 大 小 太 麻 烦 ， 你 可 以 让 浏览 器 使 用 自己 为 每 个 元 素 所 设 定 的 默认 
值 ( 即 < hl> 非常 大 ，<h2> ih, EE <p> 使 用 默认 字体 大 小 )。 


浏览 器 会 自动 实现 这 一 点 ， 除 非 是 像 第 4 章 所 描述 的 那样 添加 了 一 个 重 置 CSS 到 网 站 中 ， 
重新 设置 了 网 站 上 的 所 有 元 素 都 使 用 默认 字体 大 小 的 100%， 这 将 使 得 它们 的 大 小 完全 相同 。 


回 到 网 站 的 重 置 CSS 中 ， 确 保 font-size:100%; 只 应 用 于 «html» 元 素 ， 将 其 余 应 用 于 
一 连 串 不 同 元 素 的 font -size:100%; 样式 声明 删 掉 。 


这 可 能 导致 网 站 上 的 字体 大 小 会 有 些 问题 ， 先 前 设置 为 100% 的 元 素 现在 则 会 是 一 个 不 同 
的 大 小 ， 因 为 你 没有 对 其 以 rem 为 单位 应 用 font-size 属性 。 但 如 果 在 开始 设置 字体 大 
小 之 前 ， 记 得 从 重 置 CSS 中 删除 不 必要 的 字体 大 小 设置 ， 则 不 会 有 这 些 问 题 。 
正如 我 提 到 的 ， 这 个 选项 不 是 很 精确 。 字 体 大 小 不 一 定 是 如 你 所 选择 的 那样 。 事 实 上 ， 差 
不 多 所 有 元 素 都 会 是 基本 字体 大 小 的 100% (大 到 足以 阅读 )， 除 了 标题 «hi» 到 «he», 'E 
们 的 字体 大 小 自 成 一 系 。 在 网 页 中 使 标题 大 于 正文 的 字号 ， 而 不 是 与 之 相同 ， 这 样 能 极 大 
地 方便 人 们 阅读 。 


6. 在 em 与 rem 间 抉择 

那么 使 用 em 还 是 rem 呢 ? 两 者 各 有 人 缺点， 如 果 秽 套 的 元 素 设置 了 font-size 则 em 可 能 
导致 怪异 的 事情 发 生 ， 而 rem 则 需要 添加 额外 的 回 退 代码 (除非 不 打算 支持 旧 浏 览 器 )。 

对 于 大 多 数 样 式 ，em 都 将 能 正确 地 工作 ， 我 们 并 不 会 经 常 遇 到 了 手套 问题 。 万 一 过 到 了 ， 
通常 可 以 对 那个 设置 了 字体 大 小 的 特定 元 素 进行 修改 来 解决 此 问题 。 

使 用 em 还 有 个 好 处 ， 就 是 能 同时 改变 网 站 所 有 部 分 的 字体 大 小 ， 比 如 使 «header» 中 的 
所 有 文本 变 得 稍微 大 些 。 

如 果 愿 意 ， 你 也 可 以 在 一 个 网 站 中 同时 使 用 em 和 rem。 
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9.4.7 ”字体 大 小 间 的 关系 
一 旦 决定 了 内 容 从 16 像素 的 字体 大 小 开始 ， 那 接 下 来 该 如 何 设置 呢 ? 我 们 知道 标题 需要 
更 大 些 ， 但 多 大 合适 ? 


许多 网 站 设置 «n1» 文本 的 大 小 是 段落 文本 大 小 的 两 倍 ， 这 是 一 个 很 好 的 开始 : 


p { font-size: lem } 
hi { font-size: 2em } 











正文 文本 和 标题 之 间 必 须要 有 足够 的 区 别 ， 当 用 户 扫 视 页 面 时 才能 很 容易 地 辨别 哪 是 标题 。 








除了 使 用 字号 来 区 分 标题 级 别 ， 你 还 可 以 使 用 粗 体 或 不 同 的 颜色 来 使 它们 显得 更 突出 。 


如 果 需 要 使 用 所 有 的 标题 级 别 (从 <h1> 到 <h6>)， 则 应 该 提前 规划 ， 使 不 同 的 标题 级 别 
之 间 有 足够 的 区 别 度 : 


p { font-size: lem } 
hi { font-size: 2em } 


{ 
h2 { font-size: 1.8em } 
h3 { font-size: 1.6em } 
h4 { font-size: 1.4em } 
h5 { font-size: 1.3em } 
h6 { font-size: 1.1em } 





在 大 多 数 情况 下 我 们 并 不 会 用 到 所 有 的 标题 级 别 ， 因 此 可 以 更 随意 地 尝试 不 同 的 字体 大 小 


来 查看 其 显示 效果 。 



































为 标题 所 选择 的 字体 大 小 会 影响 到 标题 的 长 得 。 如 有 果 标 题 通常 只 有 几 个 字 ， 字 体 大 小 可 以 
设 的 更 大 些 以 撑 满 整 行 。 但 如 果 字 数 较 多 ， 则 可 使 字号 变 小 点 以 尽量 避免 自动 换行 ， 或 者 
是 使 用 较 罕 的 字 型 。 


如 果 你 是 个 数字 控 ， 可 以 尝试 用 “黄金 比例 ”来 确定 标题 文字 与 其 他 页 面 元 素 的 大 小 比 。 更 
多 的 相关 信息 ， 请 参见 Tim Brown 发 表 于 4 List Apart 之 上 的 “More Meaningful Typography" 
(http://alistapart.com/article/more-meaningful-typography ) 。 





9.4.8 行 高 

每 行文 本 的 高 度 对 易 读 性 而 言 也 很 重要 。 这 在 印刷 术语 中 称 为 行距 (leading), HA Ei 
初 是 指 在 印刷 机 上 将 铅 条 插入 每 排 铅字 下 方 来 增加 行 与 行 之 间 的 空间 (leading 作 动 词 可 表 
示 加 铅 条 ) 。 

在 网 页 上 ， 所 有 文本 都 是 呈现 在 一 个 矩形 盒 中 (我 们 在 第 3 章 中 讲 过 ) ， 行 高 也 就 是 盒子 
的 高 度 。 在 视觉 上 ， 更 大 的 行 高 意味 着 行 与 行 之 间 有 更 多 的 空间 。 
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对 于 在 line-height 属性 中 设置 的 数值 应 该 不 带 度量 单位 ， 以 便 行 高 总 是 与 文本 成 比例 。 
即便 是 百分比 或 em 也 不 需要 ， 只 要 指定 一 个 数值 即 可 : 











p { font-size: lem; line-height: 1; } 





line-height Jj 1 表示 无 论 字 体 大 小 是 多 少 ， 盒 子 都 与 文字 一 般 高 〈 即 ， 从 最 高 的 字母 
的 升 部 的 顶端 至 小 写字 母 降 部 的 底 端 )。 在 图 9-5 中 第 一 行文 字 的 1ine-height 为 1， 而 
第 二 行文 字 的 line-height 为 2， 表 示 行 高 是 字体 大 小 的 两 倍 。 你 可 以 看 到 图 中 第 二 行 
文字 多 出 的 垂直 空间 。 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. 


9-5; line-height 分 别 为 1 和 2 的 文本 的 高 度 比较 

















你 用 于 line-height 的 这 个 无 单位 数字 是 与 元 素 的 £ont-size 相 比 而 得 到 的 ， 所 以 行 高 
将 根据 字体 大 小 自动 调整 。 


文本 在 由 行 高 创造 出 的 盒子 中 总 是 垂直 居中 ， 如 图 9-5 所 示 。 
对 于 一 个 合理 的 行 高 设 定 ， 其 基准 值 是 4， 但 也 可 以 根据 使 用 的 字 型 或 其 他 因素 稍 做 改变 。 



























































如 果 各 行 彼此 离 得 太 近 ， 用 户 很 难 专注 于 一 次 只 看 一 行 。 在 图 9-6 中 可 以 看 到 拥挤 的 文本 
难于 阅读 。 

















Lorem ipsum dolor sit amet, consectetur adipiscing 
elit. Duis ultricies quis dui et auctor. Integer elit justo, 
lobortis sit amet libero eget, aliquam dapibus nisi. 
Vivamus quis aliquet enim. In sagittis interdum lorem, 
ac cursus turpis dictum ac. 











9-6; line-height 为 1 的 文本 


行 与 行 之 间 相 距 太 远 也 不 好 。 如 果 相 距 太 远 ， 用 户 的 眼睛 从 一 行 的 结尾 移动 到 下 一 行 的 开 
头 会 感觉 比较 累 。 

设置 行 高 为 2 使 得 文本 行 之 间 的 空白 过 大 ， 不 利于 舒适 地 阅读 ， 如 图 9-7 所 示 。 这 样 大 间 
距 的 行 高 用 在 大 块 的 文本 上 会 难以 阅读 ， 但 可 以 少量 地 用 在 小 块 文本 比如 引文 上 。 

















在 图 9-8 中 ， 我 们 可 以 看 到 ， 行 高 为 1.4 使 得 文本 非常 适合 阅读 并 考虑 到 了 行 与 行 之 间 必 
要 的 空间 。 
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Lorem ipsum dolor sit amet, consectetur adipiscing 
elit. Duis ultricies quis dui et auctor. Integer elit justo, 
lobortis sit amet libero eget, aliquam dapibus nisi. 
Vivamus quis aliquet enim. In sagittis interdum lorem, 


ac cursus turpis dictum ac. 








图 9-7; line-height 为 2 的 文本 





Lorem ipsum dolor sit amet, consectetur adipiscing 
elit. Duis ultricies quis dui et auctor. Integer elit justo, 


ac cursus turpis dictum ac. 





lobortis sit amet libero eget, aliquam dapibus nisi. 
Vivamus quis aliquet enim. In sagittis interdum lorem, 








图 9-8; line-height 为 1.4 的 文本 


文本 的 宽度 也 会 影响 行 高 在 页 面 上 是 否 合适 。 对 于 更 宽 的 文本 行 ， 你 需要 在 两 行 之 间 留 出 


的 空间 也 要 更 多 。 你 可 以 使 用 媒体 查询 来 做 出 这 种 调整 。 
另外 ， 笔 划 粗 的 重文 本 相对 笔划 细 的 轻 文本 也 需要 一 个 更 大 的 行 高 。 





9.5 行 长 


从 易 读 性 的 角度 考虑 ， 大 块 文本 的 最 佳 行 长 (技术 术语 是 行 


空格 。 











超 长 的 行 (如 图 9-9 所 示 ) 难以 阅读 ， 因 为 你 的 眼睛 会 很 辛苦 地 从 一 行 移 至 下 一 行 。 














在 响应 式 网 站 中 ， 你 尤其 需要 注意 这 一 点 ， 因 为 内 容 的 宽度 会 随 着 视 口 的 宽度 而 变化 。 





Wild Animals I Have Known 


By Ernest Thompson Seton. 


and showed the stamp of heroism and personality more strongly by far than it has been in the power of my pen to tell. 


however, almost no deviation from the truth in Lobo, Bingo, and the Mustang. 





These stories are truc. Although 1 have left the strict line of historical truth in many places, the animals in this book were all real characters. They lived the lives I have depicted, 


I believe that natural history has lost much by the vague general treatment that is so common. What satisfaction would be derived from a ten-page sketch of the habits and 
customs of Man? How much more profitable it would be to devote that space to the life of some one great man. This is the principle 1 have endeavored to apply to my animals. 
The real personality of the individual, and his view of life ane my theme, rather than the ways of the race in general, as viewed by a casual and hostile human eye. 


This may sound inconsistent in view of my having pieced together some of the characters, but that was made necessary by the fragmentary nature of the records. There is, 


Lobo lived his wild romantic life from 1889 to 1894 in the Currumpaw region, as the ranchmen know too well, and died, precisely as related, on January 31, 1894. 








图 9-9. 太 长 的 文本 行 难于 阅读 


T) 是 45 至 75 个 字符 ， 包 括 
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太 短 的 行 (如 图 9-10 所 示 ) 阅读 起 来 也 累 ， 因 为 你 的 眼睛 要 频繁 地 来 回 移动 。 

















Wild Animals I 
Have Known 
By Ernest Thompson Seton 


These stories are true. Although 
l have left the strict line of 
historical truth in many places, 
the animals in this book were all 
real characters. They lived the 
lives I have depicted, and 
showed the stamp of heroism 
and personality more strongly 
by far than it has been in the 
power of my pen to tell. 


T believe that natural history has 
lost much by the vague general 
treatment that is so common. 
What satisfaction would be 
derived from a ten-page sketch 
of the habits and customs of 
Man? How much more 
profitable it would be to devote 
that space to the life of some one 


9-10: 在 阅读 非常 短 的 文本 行 时 眼睛 很 快 会 感到 疲劳 。 


需要 说 明 的 是 ， 这 些 数 字 只 是 一 个 指导 方针 ， 并 非 是 一 成 不 变 的 。 你 需要 在 页 面 上 对 此 进 
行 测试 来 找 出 最 佳 的 值 。 

















9.5.1 测试 行 长 

要 保证 行 长 总 是 落 在 一 个 可 接受 的 范围 内 ， 又 不 想 每 次 测试 都 要 去 数字 数 ， 一 个 简单 的 方 
法 是 将 第 45 至 第 75 个 字符 放 入 一 个 «span» 元 素 中 ， 并 用 CSS 高 亮 显示 它们 ， 如 图 9-11 
所 示 。 你 可 以 像 本 例 一 样 为 文本 设置 一 个 背景 色 ， 或 者 是 将 文本 颜色 设置 为 红色 突出 显示 
在 页 面 上 : 








<p>These stories are true. Although I have left <span 
class-"testing"»the strict line of historical</span> 
truth in many places, the animals in this book were all 
real characters.«/p» 


.testing { background-color: #aaa; } 





Wild Animals I Have Known 
By Ernest Thompson Seton 45 75 


These stories are true. Although I have left the strict line of historical 

many places, the animals in this book were all real characters. They lived the 
lives I have depicted, and showed the stamp of heroism and personality more 
strongly by far than it has been in the power of my pen to tell. 


9-11: 数 出 第 45 至 第 75 个 字符 并 用 CSS 高 亮 显示 它们 
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如 果 想 对 网 站 做 一 个 快速 检查 ， 可 以 用 Chris Coyier 制作 的 书签 工具 做 同样 的 事情 (http:/ 
codepen.io/chriscoyier/pen/atebf)， 该 工具 能 将 页 面 上 任何 文本 元 素 中 的 第 45 个 至 第 75 个 
字符 以 红色 标 出 。 你 只 需 先 点 击 下 这 个 书签 工具 ， 然 后 再 点 击 选 择 页 面 上 的 任 一 元 素 ， 而 
不 需要 接触 到 HTML 和 CSS。 
























































不 过 ， 如 果 需 要 频繁 地 刷新 页 面 来 测试 自己 的 网 站 ， 你 可 能 会 发 现 添加 一 个 «span» 元 素 
比 每 次 刷新 后 不 得 不 再 次 使 用 书签 工具 要 更 方便 。 


9.5.2. ”调整 外 边 距 及 字体 大 小 

你 肯定 想 知 道 在 网 站 可 能 是 任意 宽度 的 情况 下 ， 如 何 使 文本 每 行 的 字数 总 是 处 在 最 佳 范 
内 ， 这 其 实 很 简单 。 

我 们 将 以 一 个 单列 布局 的 网 站 为 例 来 进行 讲解 ， 但 你 也 可 以 在 多 列 布局 的 单个 列 中 做 同样 
的 事情 。 


在 设计 一 个 网 站 时 ， 我 们 会 从 最 小 的 屏幕 大 小 (手机 屏幕 ) 开始 ， 调 整 浏览 器 窗口 至 320 
像素 宽 。 在 这 个 宽度 下 进行 设计 ， 党 试 让 每 行 保持 在 45~75 个 字符 这 样 一 个 范围 内 ， 略 微 
小 点 也 可 以 。 为 达成 这 一 目的 ， 你 会 想 使 左右 两 端的 外 边 距 尽 可 能 的 狭 ， 但 又 不 能 为 0， 
因为 这 会 导致 文本 挨 着 屏幕 的 边缘 而 不 利于 阅读 。 


通过 赋予 元 素 94% 的 宽度 并 设置 左 / 右 外 边 距 为 auto， 我 们 告诉 浏览 器 将 剩 下 的 6% 的 
宽度 平均 分 给 左右 两 端的 外 边 距 ， 各 为 3%: 
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article { 
margin: 15px auto; 
width: 94$; 


} 
接 下 来 ， 慢 慢 将 浏览 器 窗口 调 宽 ， 直 到 高 亮 文 本 完全 转 到 首 行 的 末尾 ， 如 图 9-12 所 示 。 这 
表明 在 首 行 有 了 75 个 字符 ， 如 果 继 续 调 宽 窗口 ， 字 数 将 超过 最 佳 范 围 的 上 限 ， 这 时 候 就 
需要 添加 一 条 媒体 查询 了 。 




















Wild Animals I Have Known 


By Ernest Thompson Seton 


These stories are true. Although I have left the'strict line of historical 
truth in many places, the animals in this book were all real characters. 
They lived the lives I have depicted, and showed the stamp of heroism 
and personality more strongly by far than it has been in the power of my 
pen to tell. 


I believe that natural history has lost much by the vague general 
treatment that is so common. What satisfaction would be derived from a 








s epn s cas arr 





图 9-12. 调 宽 浏览 器 窗口 ， 直 到 高 亮 文 本 都 转 到 第 一 行 
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如 果 你 有 一 个 像 MQTestio (http//mqtestio) 之 类 的 工具 ， 在 同一 浏览 器 窗口 的 不 同 标签 
页 中 打开 ， 你 可 以 很 容易 地 看 到 窗口 的 宽度 。 在 本 例 中 ， 它 是 31 em， 所 以 我 们 在 31 em 
处 添加 媒体 查询 。 


继续 增 大 浏览 器 窗口 ， 为 使 文本 行 保持 在 45~75 个 字符 的 最 佳 范 围 之 内 ， 我 们 将 增加 外 边 
距 的 宽度 (缩小 <article> 元 素 的 宽度 ) : 








Gmedia screen and (min-width: 31em) { 
article ( width: 70$ } 


) 


在 图 9-13 中 ,我们 会 看 到 ， 当 浏览 器 窗口 比 31 em 咯 宽 时 ， 页 面 有 了 更 宽 的 外 边 踊 ， 现 在 
每 行文 本 的 字数 正好 在 45~75 个 字符 范围 的 中 间 。 











Wild Animals I Have Known 


By Ernest Thompson Seton 


These stories are true. Although I have left the strict 
line of historical'truth in many places, the animals in 
this book were all real characters. They lived the 
lives I have depicted, and showed the stamp of 
heroism and personality more strongly by far than it 
has been in the power of my pen to tell. 


I believe that natural history has lost much by the 


Mhant 
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9-13: 在 增加 外 边 距 后 ， 第 一 行 的 字符 数 在 理想 的 45~75 个 字符 范围 中 间 


thot in na 














继续 调 宽 浏览 器 窗口 ， 直 到 高 亮 文 本 转 到 行 尾 ， 如 图 9-14 所 示 。 





Wild Animals I Have Known 


By Ernest Thompson Seton 


These stories are true. Although I have left the strict line of historical 
truth in many places, the animals in this book were all real characters. 
They lived the lives I have depicted, and showed the stamp of heroism 
and personality more strongly by far than it has been in the power of my 
pen to tell. 


I believe that natural history has lost much by the vague general 


treatment that is so common. What satisfaction would be derived from a 
tan nana clatah af tha bohiso nnd anntaman af Minan? Ilam: munh masa 


图 9-14. 继续 调 宽 浏 览 器 窗口 ， 直 到 高 亮 文 本 全 转 到 第 一 行 末尾 


现在 我 们 的 视 口 宽度 是 40 em。 这 一 次 不 再 增加 外 边 距 ， 而 是 将 字体 大 小 加 大 ， 以 减少 每 
行 的 字数 : 




















Gmedia screen and (min-width: 40em) { 
article { font-size: 1.1em } 


) 


结果 如 图 9-15 所 示 。 





Wild Animals I Have Known 
By Ernest Thompson Seton 


These stories are true. Although I have left the strict line of 
historical truth in many places, the animals in this book were all 
real characters. They lived the lives I have depicted, and showed 
the stamp of heroism and personality more strongly by far than it 
has been in the power of my pen to tell. 


I believe that natural history has lost much by the vague general 


图 9-15. 通过 增加 字体 大 小 ， 第 一 行 的 字符 数 重新 回 到 了 45-75 个 字符 的 中 间 范 围 














你 会 注意 到 我 们 是 在 «article» 元 素 上 改变 字体 大 小 ， 这 将 增加 元 素 中 所 有 内 容 的 字体 
大 小 ， 包 括 标题 以 及 段落 文本 ， 因 此 所 有 内 容 的 字体 大 小 仍 是 成 比例 的 。 





你 可 以 继续 调 宽 浏览 器 窗口 ， 增 加 外 边 距 和 (3) 字体 大 小 。 如 果 网 站 有 附加 的 内 容 ， 你 
可 以 在 某 个 宽度 下 把 它 分 成 多 列 布局 ， 如 我 们 在 第 5 章 中 学 习 的 那样 。 


但 到 了 一 定 的 屏幕 宽度 时 ， 我 们 并 不 想 让 网 站 继续 变 宽 。 


通过 增加 外 边 距 和 字体 大 小 ， 你 可 使 单列 布局 在 从 小 屏幕 的 手机 直至 标准 的 桌面 显示 器 上 
都 具有 良好 的 显示 效果 。 但 对 于 更 宽 的 屏幕 ， 总 会 在 某 个 宽度 下 ， 加 大 文字 也 不 再 有 意 
义 ， 到 了 那个 时 候 ， 你 可 以 用 max-width 限制 布局 不 再 变 宽 ， 我 们 在 5.12 市 中 已 有 讲述 。 








9.5.3 MF 

断 字 〈 也 叫 作 用 连 字 符 连 接 ) 有 益 于 网 页 文字 排版 〈《 断 字 是 指 在 行 尾 的 单词 由 于 太 长 而 无 
法 完全 放下 时 ， 神 览 器 会 在 适当 的 位 置 将 该 单词 分 成 两 部 分 ， 并 在 行 尾 使 用 连接 符 进行 连 
接 )。 它 能 让 行 长 变 得 更 加 一 致 ， 使 得 阅读 变 得 更 容易 ， 设 计 看 起 来 更 完美 。 断 字 使 得 在 
一 行 上 能 容纳 更 多 的 字符 《如果 不 使 用 断 字 ， 过 长 的 单词 会 整体 移 至 下 一 行 )， 这 也 意味 
着 更 少 的 滚动 。 











在 网 页 中 ， 断 字 属 性 hyphens 是 新 的 CSS3 属性 。 它 并 不 被 所 有 浏览 器 支持 ， 因 此 需要 使 
用 厂商 前 级 。hyphens 属性 可 用 时 能 极 大 地 方便 文字 排版 ， 而 不 支持 它 的 浏览 器 也 只 是 不 
会 用 连 字 符 连接 文本 ， 并 无 其 他 不 好 的 影响 。 下 面 的 代码 将 使 你 的 网 站 上 的 所 有 文本 在 换 
行 时 会 用 连 字 符 连接 : 
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body ( 
-webkit-hyphens: auto; 
-moz-hyphens: auto; 
-ms-hyphens: auto; 
-o-hyphens: auto; 
hyphens: auto; 


) 
有 些 情况 下 ， 你 可 能 不 想 对 某 一 特定 的 文本 使 用 断 字 特性 ， 我 们 可 以 排除 这 些 元 素 。 


例如 ， 代 码 示例 中 的 文本 就 不 应 该 在 换行 时 用 连 字符 连接 ， 因 为 在 代码 中 包含 连 字符 往往 
会 让 人 混淆: 





code { 
-webkit-hyphens: none; 
-moz-hyphens: none; 
-ms-hyphens: none; 
-o-hyphens: none; 
hyphens: none; 


) 
根据 设计 ， 你 可 能 需要 关 掉 某 些 级 别 的 标题 、 引 用 或 其 他 一 些 元 素 的 断 字 特 性 。 





请 注意 ， 使 用 断 字 特 性 你 必须 如 第 3 章 所 述 的 那样 设置 页 面 语言 : «html lang-ens, [4 
为 断 字 特性 是 与 语言 相关 的 。 

















9.5.4 溢出 换行 

偶尔 我 们 会 遇 到 很 长 很 长 的 单词 或 字符 串 ， 在 一 行文 本 中 容纳 不 下 且 不 会 自动 断 字 。 比 如 
我 们 遇 到 了 一 个 像 supercalifragilisticexpialidocious 这 样 长 的 单词 (当然 这 个 词 是 杜撰 的 ， 只 
是 举例 方便 ) ， 或 者 URL 中 某 一 很 长 的 部 分 ， 其 没有 能 导致 自动 换行 的 斜 杠 或 其 他 字符 。 


通过 添加 样式 overf1low-wrap:break-word， 将 使 得 浏览 器 能 对 特别 长 的 文字 自动 换行 。 





























overflow-wrap 是 CSS3 中 的 新 属性 ， 还 没有 浏览 器 支持 它 。 不 过 ，overflow-wrap H 
是 简单 取代 了 之 前 存在 于 CSS2 中 的 一 个 属性 一 一 wordwrap， 因 此 通过 将 两 者 都 包含 在 
CSS 中 就 可 覆盖 几乎 所 有 的 浏览 器 : 











body { word-wrap: break-word; overflow-wrap: breakword; } 


[小 贴 士 ] 
顺便 说 一 下 ，URL 中 的 下 划 线 字符 不 会 导致 自动 换行 ， 但 连接 号 会 ， 因 此 在 网 站 目录 名 或 
文件 名 中 最 好 是 使 用 连接 号 代替 下 划 线 。 





9.6 


& EI 


留 白 作 为 一 种 设计 理念 ， 指 的 是 布局 中 留 空 的 部 分 





外 边 距 ， 文 本 行 之 间 的 空间 ， 页 面 


上 元 素 四 周 的 空间 ， 以 及 布局 中 各 列 之 间 的 空间 。 其 不 一 定 是 白色 的 ， 而 可 以 是 该 区 域 的 


背景 色 。 





文本 周围 需要 留 白 。 如 有 果 你 的 文本 一 直 延 伸 至 页 面 的 边缘 或 紧 挨 页 面 上 的 其 他 元 素 ， 这 将 


会 难以 阅读 。 


留 白 能 让 眼睛 更 专注 于 文本 ， 这 增加 了 易 读 性 。 











很 多 网 站 都 试图 一 次 性 地 填 满 尽 可 能 多 的 信息 ， 这 使 人 很 难 专注 于 页 面 上 的 特定 条 目 。 如 








边 距 添 加 留 白 ， 你 将 创建 一 个 更 加 均衡 和 开放 的 布局 。 





View Your Accounts 
Goto: | Account Summary : 
Username: 


Password: 
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Usernamo | Password Help 


Need to set up online access? 
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Visit our Tax Center 
Sot Up Account Alerts 
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Banking 
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Mobile Banking 
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Checking Open in Minutes 
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Finish Application or View Status. 
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图 9-16: 有 大 量 文本 而 缺少 足够 留 白 的 网 站 
想 了 解 更 多 在 网 页 设计 中 使 用 留 白 的 相关 信息 ， 可 查阅 以 下 文章 : 





图 9-16 所 示 ， 这 种 页 面 仅 是 看 一 眼 都 会 让 人 感到 压力 倍增 。 而 通过 向 行 高 、 内 边 距 以 及 外 


。 Paul Boag 发 表 于 Boagworld 之 上 的 “Why whitespace matters” (http://boagworld.com/design/ 
why-whitespace-matters/) ; 
e Mark Boulton 发 表 F A List Apart 之 上 的 “Whitespace”  (http://alistapart.com/article/ 


whitespace), 
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9.7 ”内 边 距 和 外 边 距 


如 果 你 的 CSS 是 以 重 置 样式 开始 的 ， 那 么 所 有 内 容 元 素 的 外 边 距 都 会 被 重 置 为 零 ， 这 样 你 
就 可 以 设置 自己 的 外 边 距 值 了 。 首 先 ， 你 需要 设置 <p> 元 素 和 所 有 标题 (<h1> 到 «he») 
的 外 边 距 ， 这 样 它们 彼此 之 间 就 有 了 垂直 空间 。 








这 些 元 素 通常 并 不 需要 设置 左 、 右 外 边 距 (虽然 你 可 能 会 出 于 格式 上 的 考虑 而 加 上 它们 )。 
顶部 和 底部 外 边 距 应 该 以 em 单位 来 设置 ， 以 便 它们 能 根据 字体 大 小 按 比例 增 减 。 而 内 边 
距 与 左右 外 边 距 不 同 ， 它 采用 百分比 单位 ， 因 此 会 根据 包含 元 素 的 宽度 按 比例 增 减 。 


外 边 距 会 根据 每 个 元 素 的 字体 大 小 和 字 型 而 变化 。 较 大 的 字 型 可 能 需要 一 个 相对 较 小 的 外 
边 距 。 同 样 你 还 不 要 忘记 ， 行 高 也 能 增加 元 素 之 间 的 视觉 空间 。 











我 们 通常 会 给 标题 设置 一 个 较 小 的 margin-bottom 值 ， 那 样 它 会 更 接近 下 面 的 文本 ， 和 
一 个 较 大 的 margin-top 值 ， 这 样 可 以 把 它 与 前 一 段 文本 更 好 地 分 隔 开 来 。 


























一 个 好 的 开始 是 设置 所 有 这 些 元 素 的 顶部 和 底部 外 边 距 为 1 em， 并 在 设置 了 font- 
family, font-size, line-height 属性 之 后 再 单独 调整 每 个 元 素 的 边 距 ， 直 到 你 对 它 
们 的 显示 效果 满意 为 止 


























h1, h2, h3, h4, h5, h6, p { margin: lem 0; } 


[小 贴 士 ] 
在 这 之 前 ， 我 们 讨论 过 使 用 rem 代替 em 来 设置 字体 大 小 。 但 在 设置 外 边 距 时 ， 你 应 该 使 用 
em， 而 不 是 rem， 因 为 外 边 距 应 该 与 当前 元 素 相 对 应 ， 而 不 是 根 元 素 。 


9.8 为 屏幕 尺寸 改变 字 型 


在 较 大 屏幕 上 使 用 装饰 性 字 型 能 获得 很 棒 的 显示 效果 ， 因 为 我 们 有 充足 的 空间 ， 但 要 在 较 
小 的 屏幕 上 使 用 这 些 字 型 就 显得 不 合 时 宜 了 ， 如 图 9-17 所 示 。 


就 算 图 中 的 简介 文字 在 小 屏幕 上 看 起 来 还 算得 体 ， 可 它 占据 了 整个 屏幕 ， 你 甚至 无 法 看 全 
整 段 文字 。 通 常 你 只 需 将 字体 调 小 些 就 能 解决 问题 ， 但 对 于 这 个 特殊 的 字 型 ， 尤 其 是 它 全 
部 使 用 了 大 写字 母 形式 ， 较 小 的 字体 大 小 会 难以 阅读 ， 所 以 只 能 是 相对 于 大 屏幕 上 稍微 调 


小 些 。 


















































虽然 字 型 是 网 站 品牌 的 一 部 分 ， 但 必要 时 我 们 需要 折 囊 一 下 。 在 这 个 案例 中 ， 对 于 较 小 的 
屏幕 最 好 是 换 一 种 字 型 ， 且 不 能 全 部 使 用 大 写字 母 形 式 。 





BELONG T Té 53 Soy Wo wi 


TOGETHER WE ARE CONNECTED BY THE THINGS WE DO AND THE 
THINGS WE LOVE. CLOTHING IS AN EXTENSION OF OUR SKIN. 
WEAR DESIGNS BY PEOPLE WHO SHARE YOUR PASSIONS. BELONG. 





BELONG 


TOGETHER WE ARE 
CONNECTED BY THE 


T Being s brusgi o pos dy Dorade - wel developer cond t-shirt afickeradas ^ 
( { prins beextifully. ( í 


Of from Ergliend We hand.  destgrued t-shirt for others to orgey 
Read mr tory 


#WHATMAKESMETICK 
BYNAOMLATKNSON 


THINGS WE DO AND 
THE THINGS WE LOVE. 
CLOTHING IS AN 
EXTENSION OF OUR 
SKIN. WEAR DESIGNS 





B 9-17: 装饰 性 字 型 在 小 屏幕 上 的 显示 效果 并 不 好 


使 用 媒体 查询 能 够 很 容易 地 完成 这 个 目标 。 例 如 ， 媒 体 查询 可 在 30 em 宽度 下 的 狭窄 屏 
幕 尺寸 上 使 文字 变 得 较 小 ， 将 全 部 大 写 的 文本 恢复 成 正常 形式 ， 并 把 字体 系列 从 当前 的 
Populaire 变 为 简单 的 Helvetica。 整 个 简介 段落 将 马上 变 得 与 屏幕 相 匹 配 ， 也 将 更 容易 阅读 : 


#intro { font-size: 1.2em; text-transform: uppercase; 
font-family: Populaire, sans-serif; } 


Gmedia screen and (max-width:30em) { 
#intro { font-size: lem; text-transform: none; 
font-family: Helvetica, sans-serif; ] 


) 


9.9 总 结 

网 站 中 的 文字 是 传播 信息 的 关键 ， 因 此 需要 使 其 更 易于 阅读 并 具 视觉 吸引 力 。 

你 首先 应 该 选择 好 字 型 。 虽 然 有 数 千 种 字 型 可 用 ， 并 且 很 多 字 型 是 免费 的 ， 但 务必 选取 一 
种 设计 良好 且 适 合 于 你 文字 的 字 型 。 

字体 是 在 屏幕 上 显示 文字 所 需 的 数字 文件 。 要 想 将 计划 在 网 站 上 使 用 的 字体 散 入 到 网 页 中 
有 两 种 方式 ， 自 托管 字体 文件 或 者 是 使 用 字体 服务 。 此 外 不 要 忘 了 指定 候补 字体 ， 这 样 当 
正 选 字体 文件 不 可 得 或 者 不 能 被 浏览 器 使 用 时 ， 就 可 以 用 候补 字体 来 替补 。 

在 设置 网 站 文本 的 字体 大 小 时 ， 先 以 百分比 为 单位 为 整个 页 面 设置 一 个 默认 的 字体 大 小 ， 然 
后 以 em 或 rem 为 单位 来 设置 其 他 元 素 的 相对 大 小 。 正 文 的 字体 大 小 应 该 至 少 为 em， 这样 
它 对 于 大 多 数 用 户 来 说 都 是 易于 阅读 的 。 设 置 合适 的 行 高 对 于 易 读 性 也 有 很 重要 的 影响 。 
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恰当 的 行 长 会 使 得 文本 更 易于 阅读 。 使 用 媒体 查询 来 确保 无 论 页 面 是 在 多 大 的 视 口 中 显 
示 ， 行 长 都 能 保持 在 最 佳 范 围 内 。 留 白 的 合理 运用 会 使 页 面 上 的 文本 看 起 来 更 为 舒服 。 



































请 记 住 对 于 响应 式 网 站 ， 你 应 该 放弃 对 文本 字体 大 小 的 精确 控制 。 增 加 灵活 性 ， 让 你 的 内 
容 在 所 有 的 设备 上 都 有 良好 的 显示 效果 。 
接 下 来 ， 在 第 10 章 中 ， 我 们 将 学 习 如 何 创建 响应 式 的 导航 和 页 眉 布 局 。 












































第 10 章 


导航 及 页 眉 布局 














设计 响应 式 网 站 最 具 挑 战 性 的 任务 之 一 是 使 网 页 页 眉 中 的 导航 以 及 其 他 元 素 成 为 响应 
式 的 。 

网 页 页 届 (header) 指 的 是 网 页 顶部 包含 网 站 品牌 、 网 站 主导 航 以 及 用 于 搜索 或 站 点 登录 
的 表单 字段 等 附加 组 件 的 那 部 分 区 域 。 网 页 页 眉 通常 在 整个 网 站 中 始终 都 是 统一 不 变 的 。 


页 眉 中 的 组 件 执行 两 个 非常 重要 的 功能 : 一 是 告诉 用 户 所 访问 的 是 什么 网 站 ， 二 是 使 用 户 
在 网 站 中 导航 。 

在 本 章 中 ， 我 们 首先 会 回 到 之 前 的 示例 站 点 为 其 添加 一 些 简单 的 导航 样式 。 然 后 我 们 会 观 
摩 一 些 常 见 的 导航 模式 实例 ， 看 看 它们 是 如 何在 手机 那样 小 的 屏幕 上 显示 导航 ， 以 及 这 些 
导航 布局 是 如 何 适 合 于 整个 屏幕 宽度 的 。 























我 们 还 会 讲解 如 何 将 网 站 品牌 、 搜 索 框 及 其 他 组 件 整合 到 一 个 统一 的 页 眉 中 。 


10.1 响应 式 导航 


不 管 你 的 响应 式 导 航 的 外 观 如 何 ， 成 功 的 关键 在 于 首先 从 简单 直接 的 HTML. 代码 开始 ， 然 
后 再 用 媒体 查询 改变 导航 的 CSS 样式 ， 这 样 它 就 能 够 在 不 同 的 视 口 宽度 下 都 以 你 希望 的 方 
式 显 示 。 


以 我 们 的 示例 站 点 为 样本 ， 我 们 将 添加 一 些 基 本 的 样式 使 «nav 元 素 看 起 来 像 是 一 个 真正 
的 导航 ， 然 后 再 添加 一 条 媒体 查询 在 较 宽 的 视 口 下 改变 导航 样式 。 
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10.1.1 从 小 屏 开 始 


我 们 将 回 到 示例 网 站 的 最 罕 视 图 来 开始 构建 导航 。 如 图 10-1 所 示 导 航 是 一 个 无 序列 表 ， 相 
X HTML 代码 如 下 : 








«nav role="navigation"> 

«ul» 

<li><a href-"/"-sHomec/a»«/li» 

<li><a href-"/about/"»About«/a»«/li» 
<li><a href-"/links/"»Links«/a»«/li» 
<li><a href-"/contact/"»Contact«/a»«/li» 
«/ul» 

«/nav» 





Pandas Forever ' 


Pandas in Wolong 


The Wolong National Nature Preserve, in the 
Sichuan Province of China, is home to more 
than 150 giant pandas. It's one of the key 


10-1: 回 到 示例 站 点 的 最 窒 视 图 ， 导 航 是 一 个 无 序列 表 


10.1.2 ”样式 化 列表 


我 们 可 以 看 到 无 序 链接 列表 可 用 ， 但 却 不 是 很 好 看 。 














因此 ， 为 了 能 有 更 好 的 视觉 效果 ， 首 先 我 们 将 添加 一 些 CSS 样式 来 去 掉 列表 项 符号 及 内 、 
外 边 距 ， 使 列表 项 不 再 缩 进 〈 如 图 10-2 所 示 ) : 





nav ul { list-style-type: none; padding: 0; margin: 0; } 
nav li ( margin: 0; padding: 0; } 





Pandas Forever è 


mm, am. 
eee ts 





Pandas in Wolong 


The Wolong National Nature Preserve, in the 
Sichuan Province of China, is home to more 
than 150 giant pandas. It's one of the key 
sites for panda breeding research, and 

cnhs have heen horn at Wolone since i 


10-2: 添加 样式 去 除 无 序列 表 的 列表 项 符号 和 内 、 外 边 距 

















然后 ， 我 们 将 链接 置 于 方 框 中 ， 这 样 会 更 好 看 些 。 我 们 会 给 每 个 列表 项 都 加 上 边框 ， 设 置 
浅 背 景色 ， 并 添加 一 定 的 内 、 外 距 以 使 其 大 小 适合 触 屏 操作 ， 如 图 10-3 所 示 : 








nav ul { list-style-type: none; padding: 0; margin: 25px 0 0; } 
nav li ( border: 1px solid 4666; background-color: #eee; 
padding: 10px lem; margin: 3px 0 0; } 





Pandas Foreser ` 


> 

















Pandas in Wolong 


The Wolong National Nature Preserve, in the 
Sichuan Province of China, is home to more 
than 150 giant pandas. It's one of the key 
sites for panda breeding research, and 66 
cubs have been born at Wolong since it was 


图 10-3: 无 格式 的 链接 放置 于 灰 底 的 方 框 中 
接 下 来 ， 我 们 要 把 文字 变 大 一 点 ， 使 之 居中 并 去 掉 下 划 线 (如 图 10-4 所 示 ) : 














nav ul { list-style-type: none; padding: 0; margin: 25px 0 0; } 
nav li ( border: 1px solid 4666; background-color: #eee; 
padding: 10px lem; margin: 3px 0 0; text-align: center; } 

nav li a ( text-decoration: none; font-size: 1.2em; ) 





Pandas Forever ` 






















Pandas in Wolong 


The Wolong National Nature Preserve, in the 
Sichuan Province of China, is home to more 
than 150 giant pandas. It's one of the key 
sites for panda breeding research, and 66 


图 10-4. 居中 文本 并 去 掉 下 划 线 使 其 变 得 更 美观 一 
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到 目前 为 止 ， 我 们 主要 关心 的 仍 是 布局 ， 而 不 是 网 站 的 视觉 设计 ， 所 以 我 们 只 添加 了 基本 
的 样式 。 最 终 的 网 站 肯定 要 比 这 好 看 的 多 ! 

但 就 布局 而 言 ， 我 们 现在 已 经 有 了 一 个 看 起 来 很 棒 的 适用 于 最 窜 视 口 的 导航 。 接 下 来 我 们 
再 来 看 看 导航 在 更 宽 的 视 口 中 的 情况 





10.1.3 ”水平 导航 
如 我 们 之 前 所 讲 的 ， 我 们 将 从 具有 最 罕 视 口 宽 度 的 浏览 器 窗口 开始 ， 慢 慢 调 整 其 宽度 ， 当 
设计 开始 “变形 ”( 或 开始 变 得 不 再 好 看 ) 时 ， 我 们 将 在 那个 宽度 处 设置 一 个 断 点 。 


水 平 导 航 的 断 点 并 不 要 求 与 导致 整个 布局 发 生 改 变 的 断 点 相同 ， 所 以 不 用 去 担心 如 何 设置 
那些 断 点 数值 ， 只 需 关 注 导 航 并 找 出 在 什么 宽度 下 它 开 始 变 得 不 再 好 看 。 


在 视 口 宽度 大 约 为 30 em (480 像素 ) 时 ， 导 航 项 开始 看 上 去 让 人 觉得 太 宽 了 ， 如 图 10-5 
所 示 。 





























Pandas Forever 


























Pandas in Wolong 


The Wolong National Nature Preserve, in the Sichuan Province of 
China, is homc to morc than 150 giant pandas. It's onc of thc kcy sitcs 
for panda breeding research, and 66 cubs have been born at Wolong 
since it was established in 1980. Pandas are an endangered species, 


图 10-5. 在 此 视 口 宽度 下 ， 导 航 链接 不 再 好 看 
那么 在 这 个 点 上 我 们 就 需要 调整 导航 样式 ， 使 所 有 四 个 导航 项 在 视 口 宽度 大 于 30 em 时 排 
成 一 行 〈 处 在 一 个 水 平 线 上 )。 


要 做 到 这 一 点 ， 我 们 可 以 给 每 个 列表 项 添加 一 个 样式 display: block， 使 它们 表现 像 块 
级 元 素 而 不 是 列表 项 ， 然 后 把 它们 向 左 浮 动 ， 使 它们 一 个 挨 着 一 个 地 出 现在 同一 行 上 ， 如 
10-6 所 示 : 











Gmedia only screen and (min-width: 30em) { 
nav li ( display: block; float: left; } 











Pandas Forever ^... 
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Wolong 


The Wolong National Nature Preserve, in the Sichuan Province of 
China, is home to more than 150 giant pandas. It's one of the key sites 
for panda breeding research, and 66 cubs have been born at Wolong 
since it was established in 1980. Pandas are an endangered species, 
with between 1500 and 3000 living in the wild, and less than 300 in 
captivity (research centers and zoos). 
The Wolong Nature Reserve 

covers around 200,000 hectares 

(772 square miles) in the Ming 

Shan mountain range, in the ABA 
Tibetan Autonomous Region, near 
the Tibetan Plateau. Elevations in 
the reserve range from 1555 to 

4600 meters (4,000 to 11,000 ft). am. 








\ 





图 10-6: 对 于 更 宽 的 视 口 ， 我 们 将 垂直 导航 变 成 水 平 导航 ， 但 现在 它 看 上 去 还 不 是 完全 正确 
8 现 了 两 个 问题 。 首 先 ， 导 航 与 文章 元 素 的 顶部 相 重 于 了。 其 





在 添加 了 以 上 样式 之 后 ,， H 








次 ， 每 个 导航 项 的 宽度 不 一 (它们 的 宽度 由 所 包含 的 文本 决定 )， 如 果 宽 度 能 一 致 ， 看 起 
来 要 更 好 些 。 


我 们 先 解决 第 二 个 问题 。 只 需 设 置 <li> 元 素 的 宽度 为 25% 即 可 (可 在 图 10-7 中 看 到 


结果 ) : 


Gmedia only screen and (min-width: 30em) { 


) 


nav li ( display: block; float: left; width: 25 








Pandas in Wolong 


The Wolong National Nature Preserve, in the Sichuan Province of 
China, is home to more than 150 giant pandas. It's one of the key sites 
for panda breeding research, and 66 cubs have been born at Wolong 
since it was established in 1980. Pandas are an endangered species, 
with between 1500 and 3000 living in the wild, and less than 300 in 
captivity (research centers and zoos). 


The Wolong Nature Reserve 
covers around 200,000 hectares 
(772 square miles) in the Ming 
Shan mountain range, in the ABA 
Tibetan Autonomous Region, near 
the Tibetan Plateau. Elevations in 
the reserve range from 1555 to 
4600 meters (4,000 to 11,000 ft). 


The Wolong Panda Center was 











图 10-7; 现在 导航 项 是 等 宽 的 了 





i) 
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第 一 个 问题 则 要 费 点 功夫 。 通 常情 况 下 ， 我 们 只 要 给 浮动 元 素 之 后 的 那个 元 素 赋予 清除 浮 
动 样式 (clear) 就 好 了 ,但 是 由 于 «nav» 是 «header» 元 素 中 的 最 后 一 个 元 素 ， 使 用 通 
常 的 做 法 并 不 能 使 «headers 元 素 的 底部 向 下 延伸 。 


解决 方法 是 在 «nav» 元 素 底 部 添加 内 边 距 来 为 导航 创造 出 空间 。 我 们 将 使 用 em 作为 内 边 
距 度量 单位 ， 这 样 内 边 距 能 随 文字 大 小 的 变化 而 自动 调整 (如 图 10-8 所 示 ) : 





Gmedia only screen and (min-width: 30em) { 
nav li { display: block; float: left; width: 25$; } 
nav { padding-bottom: 3em; } 





Pandas Forever *, 
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Pandas in Wolong 


The Wolong National Nature Preserve, in the Sichuan Province of 
China, is home to more than 150 giant pandas. It's one of the key sites 
for panda breeding research, and 66 cubs have been born at Wolong 
since it was established in 1980. Pandas are an endangered species, 
with between 1500 and 3000 living in the wild, and less than 300 in 
captivity (research centers and zoos). 
The Wolong Nature Reserve 

covers around 200,000 hectares 

(772 square miles) in the Ming 

Shan mountain range, in the ABA 
Tibetan Autonomous Region, near 
the Tibetan Plateau. Elevations in [c 


receruve rana 
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[小 贴 士 ] 
不 采用 添加 底部 内 边 距 的 做 法 ， 也 可 使 用 以 下 代码 实现 相同 效果 : 


nav:after ( content: ""; display: table; clear: both; } 


现在 的 导航 样式 即使 在 更 宽 的 视 口 下 看 起 来 仍然 合适 (如 图 10-9 所 示 ) ， 所 以 不 需要 再 另 
外 添加 断 点 。 导 航 就 此 搞定 ! 











Pandas Forever 





Home 














Pandas in Wolong Related Links 
The Wolong National Nature Preserve, in the Sichuan Province of China, is home to more 。 Pandas Unlimited 
than 150 giant pandas. It's one of the key sites for panda breeding research, and 66 cubs have 。 National Zoo Panda 
been born at Wolong since it was cstablished in 1980. Pandas arc an endangered species, with DUE o 7 
between 1500 and 3000 living in thc wild, and less than 300 in captivity (rescarch centers and e Panda Facts at 
zoos). WWF 

The Wolong Nature Reserve covers around i Ad ADAT ARSI 


200,000 hectares (772 square miles) in thc 
Ming Shan mountain range, in the ABA 
Tibetan Autonomous Region, near the Tibetan 
Plateau. Flevations in the reserve range from 
1555 to 4600 meters (4.000 to 11,000 ft). 


The Wolong Panda Center was devestated 


图 10-9. 在 更 宽 的 视 口 下 ， 整 个 布局 看 起 来 仍然 不 错 


10.2 ”网 站 品牌 

通常 ， 用 户 访问 网 站 页 面 时 首先 看 到 的 是 网 站 品牌 。 用 户 从 别 的 地 方 点 击 链接 过 来 ， 他 们 
需要 通过 品牌 来 确认 自己 是 否 已 到 达 了 正确 的 网 站 ， 并 且 通 过 站 点 其 他 页 面 导航 而 来 的 用 
户 也 可 通过 网 站 品牌 确信 他 们 仍 在 原来 的 网 站 中 。 




















网 站 品牌 不 需 包 含 很 多 内 容 。 通 常 就 是 网 站 或 公司 标志 ， 其 至 就 是 网 站 的 标题 。 一 般 我 们 
还 会 包含 品牌 宣传 语 ， 这 样 新 的 访客 来 到 站 点 时 能 确切 知道 你 的 公司 是 做 什么 的 。 





对 于 一 个 响应 式 站 点 ， 通 常 只 需 改变 一 下 网 站 标志 或 标题 文本 大 小 就 能 很 好 地 与 屏幕 适 
配 ， 但 你 完全 可 以 做 得 更 有 创意 些 。 











在 图 10-10 中 ， 设 计 师 并 没有 在 小 屏幕 设 计 中 使 用 全 尺寸 的 网 站 标志 ， 而 是 对 其 进行 了 拆 
分 ， 将 “Dorigati” 文 本 移 到 了 图 形 的 右边 ， 这 样 处 理 后 所 占据 的 垂直 空间 要 小 于 全 尺寸 
的 网 站 标志 。 公 司 宣传 语 “Fine wines since 1858” 在 小 屏幕 和 中 等 屏幕 设计 中 位 于 页 面 顶 
部 ， 但 在 宽屏 幕 设 计 中 其 位 置 则 要 更 下 一 些 ， 但 仍然 在 首 屏 上 (CRR) 


当 我 们 在 使 用 既 有 的 品牌 标志 (要求 总 是 以 相同 的 排列 方式 来 显示 ) 进行 设计 时 ， 要 确保 
网 站 品牌 能 很 好 地 适 配 于 不 同 的 视 口 宽度 是 一 个 不 小 的 挑战 。 知 名 品牌 往往 对 其 标志 应 如 
何 显示 有 着 非常 具体 明确 的 风格 指南 。 你 应 使 品牌 主 认 同 响 应 式 设计 的 理念 ， 那 样 才 有 和 希 
望 使 他 们 接受 在 响应 式 网 站 中 对 公司 品牌 标志 进行 灵活 处 理 的 手法 。 


将 一 堆 重 要 的 东西 填充 到 一 个 狭 窑 的 空间 中 无 疑 是 一 个 巨大 的 挑战 。 只 有 使 每 个 组 件 都 更 
加 灵活 ， 才 能 更 好 地 应 对 这 种 挑战 。 

另 一 种 选择 是 在 宽屏 版 本 的 设计 中 使 用 公司 标志 ， 而 在 罕 屏 版 本 的 设计 中 只 使 用 公司 名 
(文本 )， 如 图 10-11 所 示 。 如 果 在 罕 屏 版 设计 中 不 使 用 公司 标志 ， 则 仍 需要 确保 其 他 设计 
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元 素 的 一 致 性 ， 这 样 跨 平 台 访 问 的 用 户 才能 感觉 到 访问 的 是 同一 个 网 站 。 在 本 例 中 ， 统 一 
的 配色 使 得 品牌 在 所 有 屏幕 宽度 下 都 有 一 致 的 辨识 度 。 
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10-10: 公司 标志 和 公司 名 称 的 大 小 及 位 置 变化 取决 于 屏幕 宽度 
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10.3 ”导航 链接 


导航 是 网 站 最 重要 的 部 分 之 一 ， 如 果 设 计 得 不 好 ， 将 使 得 用 户 很 难 在 整个 网 站 的 不 同 部 分 
间 进 行 导航 。 





10.3.1 灵活 性 

在 考虑 导航 在 网 站 设计 中 应 该 是 什么 样子 之 前 ， 你 首先 需要 决定 导航 中 应 包含 哪些 链接 。 
不 要 试图 在 设计 中 对 导航 项 使 用 诸如 “1 号 导航 项 ”这 类 泛泛 的 文本 ， 此 类 文本 肯定 会 与 
实际 导航 项 中 的 文本 在 长 度 上 有 很 大 不 同 ， 最 终 导致 看 上 去 完美 适 配 的 设计 在 实际 中 变 得 
一 团 糟 。 

与 此 同时 ， 即 使 知道 导航 项 会 是 哪些 ， 也 要 明白 它们 并 不 是 一 成 不 变 的 。 网 站 或 机 构 的 需 
求 可 能 会 改变 ， 将 来 可 能 会 需要 添加 或 删除 链接 。 你 设计 的 导航 是 否 具有 足够 的 灵活 性 来 
应 对 各 种 变化 呢 ? 





























如 果 最 终 要 将 完工 的 网 站 交付 给 客户 或 团队 ， 这 一 点 显得 尤为 重要 ， 因 为 他 们 可 能 并 没有 
足够 的 网 页 制作 技能 在 后 期 对 设计 进行 大 的 改动 ， 那 么 应 确保 他 们 在 不 破坏 设计 的 情况 下 
能 够 相对 轻松 地 对 导航 做 些 简单 的 修改 。 


10.3.2 ”用 户 想 要 做 什么 

设计 响应 式 导 航 ， 如 同 设计 布局 一 样 ， 应 首先 从 小 屏幕 开始 。 

首先 为 小 屏幕 设计 导航 的 最 大 好 处 在 于 它 迫 使 你 分 析 目 前 你 的 导航 中 包含 了 哪些 导航 项 ， 
并 选取 那些 真正 重要 的 导航 项 。 
以 往 通 常 是 这 样 来 设计 网 站 导航 的 : 1) 列 出 一 张 包含 网 站 所 有 组 成 部 分 的 清单 ，2) 和 利 
人 益 相 关 者 一 起 对 内 容 链接 进行 一 次 卡片 分 类 ;3) 基于 这 些 类 别 制作 一 个 多 级 导航 。 
































但 在 设计 响应 式 导航 时 不 要 这 么 做 。 











请 记 住 ， 首 先导 航 不 是 给 你 的 利益 相关 者 而 是 给 用 户 浏览 导航 用 的 ， 应 围绕 用 户 如 何 能 够 
顺利 地 浏览 网 站 来 设计 导航 。 不 要 把 导航 变 成 网 站 的 内 容 清单 ， 或 者 更 精 糕 的 情况 ， 把 它 
设计 得 像 公 司 的 组 织 结构 图 。 请 参考 7.1.2 节 中 的 “信息 架构 ”获取 有 关 搭建 网 站 信息 架 
构 的 更 多 知识 。 


在 对 网 站 实际 所 需 的 内 容 分 门 别 类 ， 并 进行 了 必要 的 精 减 之 后 。 现 在 我 们 要 考虑 的 是 用 户 
会 如 何 使 用 这 些 内 容 。 如 果 条 件 满足 ， 你 可 以 使 用 当前 网 站 的 分 析 数 据 ， 看 看 哪些 页 面 在 
现实 中 是 用 户 经 常 访问 的 。 
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英国 曼彻斯特 市 议会 网 站 (httpz//www.manchester.gov.uk/) 是 我 喜欢 的 一 个 响应 式 网 站 ， 
如 图 10-12 所 示 。 在 大 多 数 城市 网 站 上 ， 最 突出 的 内 容 是 现任 官员 的 相关 信息 与 新 闻 。 但 
曼彻斯特 网 站 不 是 这 样 ， 市 议会 明显 更 关注 市 民 的 诉求 bin (一 个 奇妙 的 英国 单词 ， 意 
思 是 垃圾 回收 ) 肯定 不 是 市 政府 最 迷人 的 地 方 ， 但 它 绝 对 是 用 户 经 常 访问 的 主题 条 目 之 一 。 
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10-12; 曼彻斯特 市 议会 网 站 关注 用 户 实际 会 去 搜寻 的 事物 


网 站 的 设计 师 没 有 浪费 小 屏幕 上 的 宝贵 空间 来 刊登 市 议员 的 新 闻 稿 或 照片 ， 他 们 关注 的 是 
人 们 访问 网 站 想 要 获取 的 信息 。 








ee 间 如 果 不 用 图 标的 话 ， 可 以 容纳 下 更 多 的 选项 条 目 ， 但 由 于 初始 

幕 只 是 起 导航 作用 ， 因 此 使 用 图 标 会 不 显得 过 于 稠密 ， 而 且 也 使 得 每 个 触摸 目标 都 易于 
hen) 很 多 网 站 都 有 使 用 图 标 ， 但 并 没有 给 这 些 网 站 带 来 实际 的 好 处 ， 而 在 本 案例 
中 ,设计 师 在 运用 简单 明了 的 图 标 这 方面 做 得 很 棒 。 





























此 外 ， 网 站 使 用 的 语言 对 用 户 来 说 也 直 白 易 懂 ， 而 不 是 政府 部 门 的 “官方 ”名 称 。 每 个 人 
都 知道 “bin” 指 的 是 什么 (至少 是 在 英国 )， 这 使 得 它 比 诸如 “Refuse Collection" "us 
收集 )、“Collection Services" (收集 服务 )， 或 “Solid Waste & Recycling" (固体 废物 回收 ) 
这 样 令 人 费解 的 短语 更 容易 为 用 户 所 理解 〈 这 些 短语 都 是 我 在 其 他 城市 网 站 的 导航 项 中 找 
来 的 )。 


在 该 网 站 的 宽屏 版 本 中 (如 图 10-13 所 示 )， 设计 师 有 足够 空间 可 以 在 主要 图 标的 下 方 
添加 补充 描述 文字 ， 并 在 第 二 行 图 标 下 也 多 添加 了 一 些 人 们 会 频繁 访问 的 链接 (例如 ， 
"Schools & education ”图 标 目录 下 包括 了 “Holiday dates" "Apply for school place” 等 )。 
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NCHESTER 
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Schools & education Benefits & support Environmental problems Roads, parking c The Council & democracy 
Including.. Including.. Including... transport Indudi 
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Find a school Housi ng Benefit Litter and debris Where to Pun Meetings & ieg 
ET 
图 10-13: 在 宽屏 布局 上 ， 有 足够 的 空间 可 容 下 额外 的 图 标 及 图 标 下 方 的 补充 说 明文 字 


注意 ， 尽 管 在 宽屏 设计 中 可 见 到 更 多 的 图 标 ， 但 小 屏幕 用 户 并 没有 丢失 任何 东西 。 所 有 的 
务 链接 对 他 们 而 言 都 是 可 访问 的 ， 无 论 用 户 使 用 什么 设备 ， 都 可 通过 页 面 下 方 的 “Can't 
find it? See other services”( 没 找到 ? 查看 其 他 服务 ) 按钮 来 访问 所 有 的 服务 链接 。 





















































10.8.3 ”基于 目标 的 导航 
> 了 设计 时 ， 有 足够 的 空间 来 添加 大 量 的 导航 项 ， 很 多 网 站 都 利用 了 这 一 先 
天 优势 ， 毕 竞 ， 谁 都 希望 自己 的 用 户 能 尽 可 能 容易 地 获得 他 们 所 需要 的 东西 。 


事实 上 ， 在 网 页 设计 中 有 一 个 存在 已 久 的 ， 非 官方 的 “三 次 点 击 ” 准 则 ， 即 站 点 中 的 每 个 
页 面 必须 不 超过 三 次 点 击 就 能 到 达 网 站 的 另 一 页 面 。 无 所 不 包 的 多 层 导 航 荣 单 即 是 遵循 此 
准则 的 产物 。 


这 在 理论 上 听 起 来 挺 不 错 一 一 点 击 次 数 越 少 越 好 一 一 但 如 果 用 户 不 知道 该 去 点 击 哪里 ， 那 
他 们 的 点 击 次 数 其 实 是 无 关 紧 要 的 。 

研究 表明 ， 只 要 用 户 相信 自己 正 走 在 通 往 目 标的 正确 的 道路 上 ， 只 要 用 户 觉 得 每 次 点 击 又 
向 目标 迈进 了 一 步 ， 那 他 们 并 不 会 介意 额外 的 点 击 。 


事实 上 ， 他 们 介意 的 是 那些 令 人 诅 表 的 点 击 ， 这 让 他 们 感觉 似乎 被 送 往 错误 的 方向 ， 或 者 
并 没有 让 他 们 感觉 到 接近 了 目标 。 


在 图 10-14 中 ， 你 会 看 见 儿 年 前 GoDaddy 网 站 的 导航 。 导 航 中 的 每 个 选项 卡 都 包含 多 个 选 
项 ， 当 鼠标 悬 停 在 这 些 选 项 上 时 又 会 弹出 对 应 的 子 菜单 。 
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图 10-14: 旧版 本 的 GoDaddy 网 站 有 非常 多 的 选项 ， 新 客户 可 能 无 法 弄 清 所 有 选项 的 意思 

这 样 的 导航 方式 的 确 只 需 点 击 儿 次 就 能 访问 网 站 的 任 一 部 分 ， 但 前 提 古 你 必须 确切 地 知道 
自己 在 寻找 什么 并且 能 够 估计 出 它 归 于 哪 一 分 类 。 

对 有 技术 背景 的 人 来 说 ， 这 可 能 不 是 一 个 大 问题 ， 但 对 于 没有 技术 背景 的 潜在 客户 ， 比 如 
想 创建 他 们 的 第 一 个 网 站 的 小 企业 主 ， 这 样 的 导航 会 把 他 们 搞 得 举 头 转向 。 如 果 初 始 过 程 
就 太 难 ， 客 户 很 可 能 会 放弃 ， 转 而 去 寻找 其 他 无 需 大 费 周折 就 能 满足 他 们 需求 的 网 站 。 











如 图 10-15 所 示 ， 经 过 重新 设计 后 ， 网 站 的 导航 变 得 简单 了 许多 。 很 明显 ，GoDaddy 在 试 
图 拉拢 新 的 客户 。 四 个 最 显著 的 菜单 项 是 基于 目标 ， 而 不 是 产品 的 。 对 于 那些 不 熟悉 网 站 
术语 的 客户 而 言 ,“Build your Website” (建立 你 的 网 站 ) 给 他 们 指出 了 一 条 非常 清晰 的 路 
径 。 而 对 于 那些 明白 自己 想 要 什么 的 用 户 ， 所 有 其 他 的 选项 依然 存在 ， 只 不 过 被 放 在 了 
“All Products”( 所 有 产品 ) 下 面 ， 访 问 它们 只 需 多 点 击 一 次 ， 这 一 点 儿 都 不 麻烦 。 
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10-15: 新 版 本 的 GoDaddy 网 站 有 清晰 的 路 径 来 指引 新 用 户 


虽然 GoDaddy 不 是 一 个 响应 式 网 站 ， 但 它 的 导航 却 是 一 个 很 好 的 基于 目标 的 导航 的 例子 。 
GoDaddy 在 其 单独 的 手机 版 网 站 上 的 导航 也 与 此 类 似 。 


10.3.4 保持 一 致 性 

不 管 你 对 不 同 视 口 宽度 下 的 响应 式 网 站 的 导航 做 了 何 种 改变 ， 要 牢记 对 于 你 的 用 户 ， 应 该 
让 他 们 感觉 网 站 还 是 原来 的 网 站 。 如 果 用 户 在 手机 上 看 到 的 导航 与 他 们 在 桌面 屏幕 上 看 到 
的 导航 过 然 不 同 ， 那 么 他 们 可 能 会 为 此 感到 困惑 不 已 。 
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根据 所 访问 设备 屏幕 宽度 的 不 同 ， 呈 现 给 用 户 的 导航 也 会 不 同 ， 但 其 主要 导航 项 应 该 一 致 ， 
并 且 是 以 同样 的 顺序 排列 。 如 果 在 桌面 宽度 的 设计 中 那些 频繁 访问 的 功能 链接 (比如 登录 ) 
被 突出 显示 在 项 部， 那么 你 的 用 户 很 可 能 也 希望 在 网 站 的 小 屏幕 版 本 中 找到 这 些 链 接 。 























对 于 具有 单独 的 手机 版 站 点 和 桌面 版 站 点 的 网 站 而 言 ， 导 航 存在 不 同 是 很 普遍 的 ， 但 在 啊 
应 式 网 站 上 也 会 有 导航 不 同 这 个 问题 。 














例如 ， 看 一 下 图 10-16 中 宜家 网 站 的 桌面 版 和 手机 版 。 桌 面 版 网 站 有 一 个 “Departments” 
(样板 间 ) 列表 ， 手 机 版 网 站 有 一 个 “Products”( 产 品 ) 列表 。 
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图 10-16: 宜家 网 站 桌面 版 和 手机 版 的 导航 所 包含 的 类 别 略 有 不 同 





这 两 个 列表 很 相似 。 例 如 ， 它 们 都 有 “Cooking”( 训 饪 ) 和 “Decoration”( 装 饰 ) 类 别 。 
而 桌面 版 网 站 有 “Dining” (餐饮 ) ， 手 机 版 网 站 则 有 “BEating”( 饮 食 ) ， 这 两 个 类 别 实 际 指 
向 的 是 相同 的 链接 。 




















不 过 ， 桌 面 网 站 有 “Bedroom” (卧室 ) 类 别 ， 包 括 床 、 床 垫 、 床 上 用 品 ， 以 及 卧室 家 具 
(比如 床头柜 )， 而 手机 网 站 只 有 “Beds & mattresses”( 床 和 床 热 )， 尽 管 有 一 个 单独 的 床 


上 用 品 链接 ， 但 似乎 没有 哪个 类 别 选项 看 上 去 包含 床头柜 。 
现在 ， 尽 管 我 相信 对 于 哪 种 导航 更 好 会 有 很 多 争论， 但 真正 的 问题 在 于 它们 是 不 同 的 。 











举 个 例子 ， 如 果 你 在 午餐 时 间 用 办 公 电 脑 训 览 该 网 站 ， 挑 选 了 一 个 床头柜 ， 你 记得 自己 
是 通过 “Bedroom ”链接 达到 床头柜 部 分 的 。 然 后 再 假设 那天 晚上 你 在 看 电视 时 ， 想 再 
看 一 下 床头柜 ， 便 拿 出 了 手机 阐 览 网 站 ， 可 能 你 没有 广 意 到 导航 的 不 同 ， 而 是 直接 点 击 











"Products" (产品 ) 类 别 ， 其 包含 的 选项 看 起 来 与 午餐 时 所 看 到 的 相似 ， 接 着 你 会 点 击 
"Beds & mattresses” ( 床 和 床 垫 ) ， 认 为 它 与 你 在 桌面 网 站 所 点 击 的 链接 是 相同 的 ， 可 结果 
却 是 你 搞 不 明白 为 什么 现在 找 不 到 床头柜 了 。 




















这 是 拥有 单独 的 桌面 版 和 手机 版 网 站 的 一 个 缺点 ， 你 很 有 可 能 最 终 会 弄 出 两 个 不 同 的 用 户 
界面 ， 它 们 很 容易 把 人 搞 糊 涂 。 而 且 这 个 问题 也 延续 到 了 响应 式 网 站 上 。 


























设计 师 们 常常 会 假定 移动 设备 用 户 想 要 的 选项 与 桌面 用 户 不 同 ， 并 在 响应 式 网 站 的 小 屏幕 
版 设计 中 隐藏 某 些 选 项 。 
然而 ， 你 需要 记 住 的 是 ， 移 动 设 备用 户 和 桌面 用 户 往往 就 是 同一 个 的 用 户 ， 只 不 过 是 使 用 
了 不 同 的 设备 ， 他 们 认为 网 站 的 导航 是 相同 的 。 


10.3.5 “保持 简单 

我 们 已 经 知道 需要 确保 响应 式 网 站 能 工作 于 所 有 的 设备 ， 不 管 设备 的 性 能 高 低 和 屏幕 大 
小 。 这 对 于 而 言 导航 尤其 重要 ， 因 为 如 果 导 航 对 某 些 用 户 不 起 作用 ， 那 么 网 站 对 他 们 来 说 
就 基本 上 是 不 可 用 的 了 。 





















































切记 ， 同 布局 设计 一 样 ， 为 了 那些 所 用 设备 不 支持 媒体 查询 或 JavaScript 的 用 户 ， 导 航 也 
需要 从 基本 的 HTML 开始 。 
尽管 一 些 更 复杂 的 响应 式 导 航 会 依赖 于 JavaScript， 但 你 需要 确保 导航 在 任何 屏幕 大 小 和 


任何 设备 类 型 上 都 可 用 ( 即 导航 项 是 可 见 和 可 点 击 的 ) 。 不 支持 JavaScript 的 用 户 可 能 只 占 
非常 小 的 比例 ， 因 此 可 以 不 必 追 求 很 棒 的 视觉 效果 ， 保 证 能 用 即 可 。 








同时 ， 你 也 应 明白 越 复杂 的 代码 越 难 以 维护 ， 且 在 对 网 站 进行 更 改 时 ， 也 越 容 易 出 错 。 考 
虑 清楚 你 是 否 真 的 需要 那么 花哨 的 导航 ， 还 是 一 排 简单 的 链接 就 够 了 。 其 中 的 权衡 是 否 合 
适 呢 ? 


10.4 导航 模式 


大 多 数 非 响应 式 网 站 都 是 为 桌面 显示 器 设计 的 ， 它 们 的 主导 航 遵 循 着 同样 的 通用 模式 : 以 
通栏 方式 水 平 显示 在 页 面 顶 部 ， 如 图 10-17 所 示 。 

左 侧 导航 在 几 年 前 很 流行 ， 但 随 着 时 间 的 发 展 这 种 导航 模式 已 经 过 时 ， 正 如 研究 也 表明 左 
侧 导航 远 不 及 顶部 导航 的 效率 。 









































u 


虽然 有 时 在 主流 网 站 上 还 能 看 到 左 侧 导 航 (如 图 10-18 所 示 )， 但 它 通常 是 用 作 主 题 列 对 
而 主要 的 功能 导航 还 是 在 页 面 顶部 。 
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图 10-18: 左 侧 导航 有 时 用 于 主题 或 类 别 列表 ， 而 主导 航 项 仍 在 顶部 


响应 式 导 航 能 适应 所 有 的 视 口 宽度 ， 从 手机 至 宽屏 显示 器 。 在 大 多 数 情况 下 ， 响 应 式 导航 
将 遵循 现 有 的 宽屏 导航 设计 模式 ， 因 为 这 些 模式 已 为 上 网 的 人 们 所 熟知 。 


在 首次 设计 响应 式 网 站 时 ， 许 多 设计 师 发 现 他 们 所 面临 的 最 大 的 挑战 是 制作 导航 ， 但 问题 
实际 上 并 不 是 制作 一 个 响应 式 导 航 ， 而 是 制作 一 个 好 的 小 屏幕 导航 。 而 一 旦 有 了 好 的 小 屏 
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幕 导 航 ， 在 较 宽 的 屏幕 上 添加 媒体 查询 来 改变 或 移动 导航 不 过 是 小 菜 一 碟 。 

现在 有 很 多 非常 棒 的 小 屏幕 导航 设计 ， 它 们 通常 遵循 数 个 模式 中 的 一 个 ， 也 就 是 说 ， 我 们 
可 以 根据 共同 的 特征 对 它们 进行 分 类 。 

我 们 将 讲解 一 些 基 本 的 响应 式 导航 模式 ， 解 释 它 们 的 工作 原理 并 给 出 实际 的 网 站 用 例 。 
除了 在 本 书 中 讲 到 的 模式 ， 还 有 很 多 其 他 的 模式 ，Brad Frost 的 Responsive Patterns (响应 
式 模式 ) 网 站 (http://bradfrost.github.io/this-is-responsive/patterns.html) 是 一 个 很 好 的 资源 。 


其 中 不 仅 包含 了 导航 模式 ， 还 有 用 HTML 和 CSS 实现 的 可 供 你 剖析 的 例子 ， 以 及 响应 式 
布局 、 表 单 及 其 他 模块 的 设计 模式 。 


不 要 忘记 ， 你 应 该 使 用 <nav> 元 素 和 相应 的 WAI-ARIA 的 角色 属性 来 编写 导航 代码 ， 如 
我 们 在 第 3 章 中 所 讲 到 的 那样 : 

















«nav role-"navigation"- 


«/nav» 


[ 小 贴 士 ] 
要 想 获得 更 多 的 移动 设备 用 户 界面 模式 ， 可 查看 Theresa Neil 所 著 的 《移动 应 用 UI 设计 模 
式 》 一 书 (http://www.mobiledesignpatterngallery.com )。 


10.4.1 顶部 导航 

在 响应 式 网 站 上 最 简单 的 导航 处 理 方式 就 是 把 所 有 导航 项 都 放 在 页 面 顶 部 ， 再 根据 屏幕 宽 
度 用 媒体 查询 和 CSS 布局 样式 重新 排列 它们 。 

在 本 章 前 面部 分 我 们 用 示例 站 点 进行 讲解 时 ， 你 已 经 见 过 了 简单 的 顶部 导航 代码 ， 在 这 
里 ， 我 们 再 来 看 几 个 真实 的 网 站 例子 。 


你 可 能 会 想 把 导航 项 先是 在 小 屏幕 上 以 垂直 堆 释 方式 排列 ， 然 后 在 更 宽 的 视 口 中 ， 转 而 以 
水 平 并 排 的 方式 排列 ， 如 图 10-19 所 示 的 Enochs Fish & Chips 网 站 那样 。 






































WEVE HAULED IN THE CATCH. 
BET YOUR FISH AND CHIPS NOWI 


WEVE HAULEDIN THE CATCH GET YOUR FISH 
AND CHIPS NOWI 





LI € 
图 10-19: 顶部 导航 中 的 项 目 会 随 视 口 宽度 变化 而 重新 排列 


这 个 例子 中 的 HTML 代码 非常 简单 ; 
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«ul class-"nav"» 
<li><a href-"Hfood"»Food«/a»«/li» 
<li><a href-"ffish"»Fish«c/a»«/li» 
<li><a href-"dinews"»Newsc/a»«/li» 
<li><a href-"Hcontact"»Contact«/a»«/li» 
«/ul» 











这 之 后 再 用 媒体 查询 来 链接 单独 的 样式 表 ， 根 据 屏 幕 宽度 使 用 绝对 定位 来 改变 导航 项 的 
位 置 。 











如 果 你 之 前 听 说 过 响应 式 网 站 看 起 来 总 显得 乏味 和 沉 问 ， 那 么 Enoch 的 网 站 无 颖 证 明了 它 
们 并 不 都 是 那样 的 。 











再 来 看 第 二 个 实例 ， 在 不 同 的 视 口 宽度 下 ，Food Sense 网 站 也 会 对 页 面 顶部 的 导航 项 进行 
重 排 。 在 图 10-20 中 ， 你 可 以 看 到 在 不 同 的 视 口 宽度 下 导航 项 和 网 站 Logo 是 如 何在 页 面 
顶部 (或 页 面 左 侧 ) 排列 的 。 











































Shop for the Best 
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Shop for the Best 





The A-List 








10-20. 可 根据 视 口 宽 度 ， 用 媒体 查询 和 基本 布局 样式 重新 排列 页 面 顶部 的 导航 和 网 站 品牌 














该 网 站 页 面 顶 部 的 元 素 都 包含 在 «header» 元 素 中 ， 导 航 则 是 «nav» 元 素 中 的 一 个 无 序列 
表 ， 网 站 标志 是 一 个 «hi» 元 素 。 同 样 的 ， 在 不 同 的 视 口 宽度 下 网 站 通过 媒体 查询 用 基本 
的 布局 样式 比如 浮动 和 外 边 距 来 重新 排列 导航 项 。 

















在 较 宽 的 页 面 布局 中 每 个 导航 项 旁 都 有 一 个 医 
用 background-image: none 将 其 去 除 。 


不 过 ， 如 果 你 有 非常 多 的 导航 项 ， 这 样 的 方法 就 行 不 通 了 。 因 为 在 小 屏幕 上 ， 导 航 最 终 将 
会 占据 整个 手机 屏幕 ， 如 图 10-21 所 示 。 











图 来 实现 的 ， 宽 度 较 窗 时 
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图 10-21: 如 果 你 有 太 多 的 导航 项 ， 在 移动 设备 上 它们 最 终 将 会 占据 整个 屏幕 


你 的 导航 解决 方案 必须 在 小 屏幕 上 为 内 容留 出 空间 。 要 确保 用 户 访问 网 站 时 (即使 用 的 是 
手机 )， 一 眼 就 能 够 看 到 一 些 有 趣 的 内 容 ， 而 无 需 滚动 屏幕 。 











10.4.2 ”页 脚 导航 

要 解决 在 网 站 的 小 屏 版 本 中 导航 占用 空间 过 多 的 问题 ， 最 简单 办 法 就 是 将 其 移 到 页 面 的 底 
部 ， 然 后 再 用 一 个 销 点 链接 (一 个 可 将 你 带 到 同一 页 面 的 不 同位 置 的 链接 ) 指向 它 ， 这 通 
常 称 为 页 脚 导 航 (footer navigation) 或 页 脚 锚 点 导航 (footer anchor navigation) 。 

































































Contents Magazine 网 站 使 用 的 即 是 这 种 类 型 的 导航 。 在 图 10-22 中 ， 你 可 以 看 到 在 页 面 顶 
部 有 一 个 “Explore” 链 接 ， 包 含 一 个 下 指 的 箭头 ， 点 击 该 链接 将 把 你 带 到 靠近 页 面 底部 ， 
包含 有 搜索 框 和 导航 链接 的 地 方 。 


尽管 这 个 网 站 只 有 四 个 导航 链接 ， 但 这 些 链接 加 上 搜索 框 在 小 屏幕 上 几乎 占据 了 一 半 的 可 
用 空间 ， 因 此 把 它们 迁移 出 页 面 顶部 将 为 网 站 品牌 及 开头 的 页 面 内 容 腾 出 更 多 的 空间 。 
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10-22; Contents Magazine 网 站 使 用 页 脚 导航 
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实现 页 脚 导航 的 代码 非常 简单 ， 只 需要 在 页 面 顶 部 放 一 个 锚 点 链接 ， 下 面 的 代码 复制 自 


Contents 网 站 : 


«p class-"go-nav"» 











«a href-z"isite-nav"»«b»Explore«/b»«/a» 


</p> 


搜索 框 和 链接 的 代码 放 在 靠近 HTML 文档 底部 的 位 置 ， 与 它们 在 小 屏 设计 中 的 实际 位 置 相 
吻合 。 在 本 案例 中 ， 网 站 的 设计 者 用 一 个 <div> 元 素 包 含 搜索 框 和 导航 链接 ， 其 中 导航 链 
接 作 为 一 个 «ul» 元 素 中 又 包含 在 «nav» 元 素 中 。 


























在 更 大 的 视 口 宽度 下 ， 顶 部 有 足够 的 空间 来 容纳 导航 及 搜索 框 ， 如 图 10-23 所 示 。 
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图 10-23: 在 更 宽 的 视 口 下 ， 导 航 移 至 屏幕 顶部 

















因此 网 站 使 用 媒体 查询 ， 通 过 绝对 定位 技术 将 包含 导航 项 的 整个 <div> 元 素 移 到 页 面 顶部 
@media screen and (min-width: 48em) { 
#site-nav { position: absolute; top: 
100%; z-index: 5; } 
} 
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这 时 就 不 再 需要 “Explore” 链 接 了 ， 因 此 应 将 其 从 屏幕 上 隐藏。 通过 赋予 其 一 个 负 的 位 置 
值 将 其 置 于 视 口 之 外 从 而 达到 隐藏 的 目的 : 














.go-nav { left: -1000em; } 

















如 果 你 只 有 几 个 链接 ， 那 么 页 脚 导航 是 一 个 好 的 解决 方案 ， 但 缺点 是 它 可 能 会 迷惑 用 
户 一 一 怎么 点 击 一 个 链接 ， 就 突然 到 了 页 面 的 底部 。 


10.4.3 切换 式 推出 型 导航 
星巴克 网 站 在 较 窗 的 屏幕 宽度 下 使 用 一 种 常见 的 通常 称 为 切换 式 菜单 (toggle menu) 的 导 
航 ， 该 导航 可 通过 反复 点 击 使 其 在 隐藏 和 可 见 状态 下 来 回 切换 。 














在 图 10-24 最 左边 的 那 张 图 中 ， 你 看 到 的 是 星巴克 网 站 的 窗 屏 设计 。 该 图 右上 角 的 三 道 横 
线 是 一 种 常见 的 导航 图 标 ， 点 击 它 后 ， 导 航 显 露 ， 将 其 下 面 的 内 容 往 页 面 下 方 推 。 你 可 以 
看 到 ， 根 据 屏幕 宽度 的 不 同 ， 导 航 会 分 成 一 列 或 者 两 列 。 
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Coffeehouse Responsibility 
Coffeehouse Card Shop 


Responsibility 






This inspired coffee 


combines four different n Starbucks” 
Ea cottees trom three ditterent Tribute Blend 
regions. Spicy and bold, Our most complex coffee. 


Starbucks$ Tribute Blend is Ever 
unlike any other coffee on 


Starbucks" ES 
> Tribute Blend TV 


图 10-24. 点 击 屏幕 上 方 的 三 道 线 图 标 使 导航 显现 ， 这 会 将 页 面 内 容 往 屏幕 下 方 推 


earth. 








在 导航 处 于 可 见 状态 时 ， 只 需 点 一 下 “x” 即 可 让 它 消 失 。 








在 更 宽 的 屏幕 中 〈 如 图 10-25 所 示 )， 页 面 顶部 有 横向 空间 可 容纳 下 整个 导航 ， 附 加 的 媒体 
查询 在 有 更 多 空间 可 用 时 会 进一步 重 排 导航 组 件 。 








对 此 种 导航 模式 需要 注意 的 就 是 其 有 些 复杂 ， 并 且 要 用 到 JavaScript。 如 果 你 不 懂 JavaScript, 
那 也 不 用 担心 ， 这 样 的 例子 比比 丝 是 ， 你 可 以 直接 复制 粘贴 代码 到 自己 的 页 面 中 。 
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ba 


fes Meno Coleehouse  Resgomib/ty Card Shop 


FR Coffee Menu Coffeehouse Responsibility Card Shop 


10-25: 在 宽屏 幕 上 浏览 时 ， 导 航 以 水 平 排列 方式 显现 











你 可 以 在 Brad Frost 的 响应 式 模式 汇集 : 切换 式 导 航 (http//codepen.io/bradfrost/full/sHvaz ) 
中 找到 实现 这 类 导航 的 代码 。 








在 Frost 给 出 的 例子 中 〈 像 在 图 10-24 中 一 样 ) ， 小 屏幕 版 导航 的 工作 方式 是 ， 当 用 户 点 
击 图 标 时 ， 会 触发 一 个 JavaScript 动作 ， 调 用 jQuery 的 toggleclass 方法 将 CSS 类 
active 添加 到 <nav> 元 素 中 ， 下 面 结合 代码 详细 说 明 。 


在 首次 加 载 页 面 时 ，<nav> 元 素 不 具有 active 类 属性 ， 应 用 的 是 以 下 样式 : 




















nav { max-height: 0; overflow: hidden; } 


其 中 max-height 为 0 表示 元 素 在 屏幕 上 不 占有 空间 ，overflow: hidden 表示 «nav» 
元 素 包 含 的 内 容 不 得 超出 元 素 范 围 显示 ， 合 在 一 起 的 意思 就 是 «nav» 元 素 是 不 可 见 的 。 











当 用 户 点 击 图 标 时 ， 触 发 JavaScript 将 active 类 添加 到 <nav> 元 素 中 ， 以 下 CSS 样式 被 
应 用 : 


nav.active { max-height: l5em; } 





«nav» 元 素 的 max-height 属性 变 成 15 em， 这 意味 着 元 素 可 以 在 屏幕 上 获得 它 所 需 的 全 
部 空间 (最 大 高 度 15 em， 这 比 其 实际 所 需 高 度 要 大 很 多 )。 因 此 ， 该 元 素 变 成 可 见 状态 ， 
其 后 面 的 内 容 会 往 下 推 。 

导航 项 是 一 个 无 序列 表 ， 因 此 它们 以 垂直 堆 释 方式 显示 (当然 可 通过 附加 的 样式 使 之 变 得 
更 好 看 )。 


对 于 更 宽 的 屏幕 ， 如 图 10-25 所 示 ， 将 应 用 以 下 CSS 样式 : 

















Gmedia screen and (min-width: 48.25em) { 
nav { max-height: none; } 
nav li ( display: inline-block; } 
a.menu-link ( display: none; ) 


) 
其 中 «nav» 元 素 的 max-height 设置 为 none， 表 示 导 航 将 以 全 高 显示 。 列 表 项 被 赋 
予 样式 display: inline-block， 这 样 它们 将 排列 成 一 行 。“Menu” 链 接 被 赋予 了 
display: none 样式 使 得 它 不 再 可 见 ， 因 为 菜单 已 经 是 可 见 状 态 ， 我 们 不 再 需要 显示 切 
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换 菜单 的 选项 。 
不 要 忘记 确保 你 的 导航 对 于 禁用 了 JavaScript 的 月 


上 户 也 是 可 用 的 。 就 像 星 巴克 网 站 的 首页 





设计 虽然 依赖 于 JavaScript， 但 在 禁用 Javascript B 


的 菜单 默认 已 经 是 打开 了 的 ， 且 在 你 访问 网 站 的 整个 过 程 中 它 都 保持 着 打开 的 状态 ， 这 样 

















的 情况 下 加 载 星 巴克 网 站 ， 在 窗 屏 上 显示 





它 对 用 户 仍然 是 可 用 的 。 不 过 遗憾 的 是 ， 由 于 星巴克 首页 的 设计 使 用 了 JavaScript， 你 会 发 
现 禁 用 JavaScript 后 的 显示 效果 存在 一 些 缺 陷 ， 并 不 是 所 有 的 内 容 都 是 可 见 的 ， 如 图 10-26 





所 示 。 





Coffee Coffee Menu Coffeeho 


Menu 1 


Coffeehouse 


Responsibility 


Card 


Shop 




















use Responsibility Card Shop 








10-26: 3$ JavaScript 被 禁用 时 ， 在 小 屏幕 上 ， 菜 单 默认 是 打开 的 ， 虽 然 不 是 所 有 的 内 容 都 可 见 


[小 贴 士 ] 


在 打开 和 关闭 菜单 时 ， 你 可 以 使 用 CSS 过 渡 动 画 来 使 得 这 一 过 程 更 加 平滑 。 要 了 解 更 多 
关于 如 何 使 用 CSS 过 渡 动 画 的 知识 ， 可 阅读 CSS-Tricks .E 4&5 "transition" — X ( http://ess- 


tricks.com/almanac/properties/t/transition/ )。 


对 于 切换 荣 单 ， 你 也 可 以 使 菜单 出 现在 屏幕 的 最 














上 方 ， 而 不 是 出 现在 图 标 下 方 。 图 10-27 
) 


所 示 的 例子 来 自 于 Responsive Nav (http//www.responsive-nav.com) ， 一 个 用 来 演示 这 种 导 








航 的 网 站 ， 该 实例 是 一 个 非常 轻 量 的 JavaScript 插件 (免费 且 开 源 )。 











如 果 浏 览 器 不 支持 JavaScript， 它 就 会 默认 显示 导航 菜单 ， 但 不 会 显示 图 标 ( 这 不 像 前 面 


10-26 的 示例 中 ， 按 钮 仍然 可 见 ， 尽 管 已 没有 任何 作用 )。 


























可 下 载 的 ZIP 演示 文件 中 有 7 个 例子 可 供 参 考 ， 其 中 包括 菜单 打开 在 图 标 上 方 或 下 方 的 无 




















样式 版 本 ， 一 个 加 入 了 支持 旧版 IE 播 件 的 “ 重 版 本 ” (为 兼容 不 得 不 添加 更 多 的 代码 ) s 
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一 个 宽屏 版 本 ， 菜 单 在 左 侧 在 而 不 是 在 顶部 (如 图 10-28 所 示 ) ; 和 一 个 组 合 了 两 个 独立 
导航 的 版 本 (如 图 10-29 所 示 )。 














HOME 


RESPONSIVE NAV 


Responsive navigation plugin 
without library dependencies and 
with fast touch screen support. Try 
it out by resizing this window. 


DOWNLOAD 


FEATURES USAGE INSTRUCTIONS VIEW ON GITHUB 


- | RESPONSIVENAV 


RESPONSIVE NAV 
Responsive navigation plugin Responsive navigation plugin without library 
cithou: library dependencies and dependencies and with fast touch screen support. ETT 

图 10-27. 切换 菜单 也 可 使 导航 出 现在 图 标 上 方 而 不 是 图 标 下 方 


FEATURES 


USAGE INSTRUCTIONS 


VIEW ON GITHUS 











Prototype 


Despite the apparent simplicity, there are 


Prototype 


Despite the apparent many underlying factors which, when 
simplicity, there are many thought out and implemented properly, 
underlying factors which, can make that simple solution even better 
when thought out and without adding more complexity to the 
implemented properly, can P rototype user interface. 

make that simple solution 

even botter without ading | | Despite the apparent Berl ese et het 
more complediy to the simplicity there are many bp rend 








图 10-28: 对 于 一 个 切换 式 导航 , 宽屏 幕 设 计 也 可 以 使 用 左 侧 导航 方式 取代 顶部 导航 方式 





Blog 


Sitemap 





图 10-29: 整合 两 组 独立 的 导航 链接 到 同一 个 切换 式 导航 中 


就 如 同 其 他 插件 一 样 ， 你 可 以 对 它们 进行 修改 以 满足 自己 的 需要 ， 以 这 些 代 码 为 起 点 来 实 
现 更 复杂 的 效果 。 按 照 需要 修改 包括 文字 排版 、 过 渡 动 画 和 布局 在 内 的 CSS 样式 。 此 外 你 
还 可 以 添加 更 多 的 媒体 查询 来 为 中 等 宽度 屏幕 添加 额外 的 导航 设计 。 
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10.4.4 切换 式 覆 盖 型 导航 


如 果 你 希望 不 使 用 JavaScript 就 实现 一 个 切换 式 菜 单 














， 这 不 是 没有 办 法 ， 但 却 存 在 着 缺点 。 





例如 ， 在 图 10-30 中 你 看 到 的 是 一 个 微型 网 站 ， 人 允许 湾 在 的 Nichols College 学 生 咨 询 信 息 。 








用 户 点 击 顶 部 的 图 标 使 导航 显现 ， 但 不 像 前 














推 ， 在 本 例 中 导航 是 全 加 (覆盖) 在 内 容 之 上 的 。 
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图 10-30: 在 DAXEEMONO, emm ü 











mynichols.edu 


Why Nichols? 
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Student Life 
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President or B 
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看 的 例子 在 显示 导航 时 会 将 后 面 的 内 容 往 下 


Em) 在 内 容 的 上 面 ， 而 不 是 将 内 容 推 离 


Aaron Gustafson 将 其 为 该 网 站 创建 导航 的 方法 写 在 了 net Magazine 上 的 “Build a CSS 


dropdown menu" (http://www.creativebloq.com/css3/build-smart-mobile-navigation-without- 





因为 当 菜单 打开 时 被 覆盖 的 内 容 是 
Gustafson 创建 了 一 个 “额外 的 ”链接 来 关闭 菜单 ， 其 实质 上 覆盖 了 整 











hacks-6122800) 一 文中 。 他 使 用 CSS 选择 器 属性 :target 3k1T7] 


F 和 关闭 导航 元 素 。 




















不 可 见 的 ， 这 就 我 们 需要 能 很 容易 地 关闭 菜单 。 因 此 ， 














个 剩余 的 页 面 ， 这 样 








用 户 点 击 页 面 的 任何 地 方 都 会 关闭 导航 。 不 过 这 种 做 法 的 副作用 是 ， 如 果 你 未 关闭 导航 就 











向 下 深 动 页 面 去 填写 表单 ， 之 后 一 旦 你 点 击 了 任何 地 方 ， 就 会 一 路 跳 回 到 页 面 的 顶部 。 











10.4.5 ”部 分 优先 型 导航 


有 时 在 一 个 响应 式 设计 的 中 等 屏幕 宽度 版 本 中 ， 





下 全 部 的 导航 项 。 








在 图 10-31 中 ， 你 可 以 看 到 一 个 这 样 的 例子 。 在 最 罕 
“菜单 ”按钮 ， 在 最 宽 的 屏幕 版 本 中 ， 


幕 空间 只 够 容纳 一 部 分 导航 项 ， 而 容 不 





的 屏幕 宽度 下 ， 空 间 只 放 得 下 一 个 
则 有 一 个 包含 9 个 导航 项 的 水 平 业 单 。 而 在 中 等 宽 
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度 中 ， 没 有 空间 可 容 下 全 部 的 9 个 导航 项 ， 但 也 不 是 像 窗 屏 设计 那样 把 它们 全 都 放 回 到 菜 
单 中 ， 而 是 将 4 个 最 重要 的 链接 包含 在 导航 中 (完整 导航 栏 中 的 前 四 个 导航 项 )， 并 在 最 
右边 包含 一 个 额外 的 “More”( 更 多 ) 链接 ， 它 将 触发 一 个 包含 剩余 导航 项 的 下 拉 菜 单 。 











PITTSBURGH 
O GLASS CENTER 
` 
manat 
A E 





图 10-31. 在 中 等 宽度 设计 中 ， 在 顶部 导航 栏 中 有 空间 可 显示 部 分 但 不 是 全 部 的 导航 项 


开发 者 Michael Scharngal 为 这 种 技术 创造 了 一 个 术语 “部 分 优先 型 导航 ”(priority navigation), 
这 是 一 种 在 中 等 宽度 屏幕 上 充分 利用 空间 的 最 佳 方式 。 





在 上 面 的 例子 中 ， 你 在 中 等 宽度 屏幕 上 看 到 的 导航 是 用 JavaScript 生成 的 ， 但 你 也 可 以 使 
用 媒体 查询 和 CSS. 生成 类 似 的 效果 。 


10.4.6 选择 菜单 型 导航 
图 10-32 显示 的 是 一 个 英国 抵押 贷款 公司 的 网 站 ， 其 在 最 罕 屏 幕 宽 度 下 使 用 <select> 选 
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10-32: 在 移动 设备 上 以 选择 菜单 形式 显示 导航 ， 选 择 菜单 会 以 设备 的 默认 显示 形式 出 现 。 中 图 为 
在 iOS 设备 中 打开 选择 菜单 ， 右 图 为 在 Android 设备 中 打开 选择 菜单 
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在 更 宽 的 屏幕 宽度 下 ， 如 图 10-33 所 示 ， 该 网 站 有 一 个 标准 的 水 平 菜 单 ， 其 包含 了 下 拉 子 
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10-33: 在 更 宽 的 视 口 宽 度 下 ， 导 航 是 一 个 标准 的 水 平 菜单 ， 包 含 了 下 拉 式 子 导航 


在 触摸 设备 上 ， 选 单 类 型 的 表单 字段 (<select>) 将 显示 一 个 触摸 友好 的 选择 器 ， 具 有 
操作 系统 的 默认 样式 。 在 图 10-32 中 ， 你 可 以 看 到 在 iOS 和 Android 中 选择 器 的 样式 有 所 
不 同 。 


这 类 导航 的 一 个 优点 在 于 它 占 用 的 空间 很 少 。 


不 过 ， 有 很 多 设计 师 怀 疑 这 类 导航 的 可 用 性 。 虽 然 它 看 上 去 像 是 一 种 简单 的 压缩 导航 项 列 
表 的 方法 ， 但 它 可 能 会 让 用 户 感 到 些许 困惑 ， 因 为 它 使 用 的 是 用 户 通常 只 会 在 表单 中 才 看 
得 到 的 元 素 。 我 个 人 不 推荐 这 种 模式 ， 但 很 多 网 站 都 在 使 用 这 类 导航 。 


要 编写 这 种 选择 菜单 型 的 导航 代码 ， 需 要 为 网 站 的 导航 菜单 创建 两 组 单独 的 HTML 代码 ， 
一 个 «select» 元 素 创建 下 拉 子 菜单 ， 一 个 <ul> 元 素 创建 宽屏 幕 上 的 水 平 导 航 。 网 站 根 
据 屏幕 的 宽度 使 用 媒体 查询 来 决定 显示 哪 一 个 和 隐藏 哪 一 个 。 


这 样 做 的 缺点 是 你 必须 为 导航 准备 两 套 单独 的 HTML 代码 。 除 了 增加 页 面 的 重量 之 外 ， 这 
也 还 意味 着 你 必须 始终 确保 任何 改变 都 在 两 段 代码 中 得 到 同步 更 新 ， 这 样 才 能 使 用 户 不 管 
看 到 的 是 哪 种 类 型 的 导航 ， 菜 单项 都 是 一 样 的 。 


另 一 种 在 选择 菜单 和 标准 导航 间 切 换 的 方式 是 使 用 JavaScript 脚本 。jQuery 插件 Responsive 
Menu (https://github.com/mattkersley/Responsive-Menu) 和 SelectNavjs (http://lukaszfiszer.github. 
io/selectnav.js/) 都 可 用 来 将 一 个 «ul» 或 «ol» 元 素 变 成 一 个 «select» 元 素 。 





YO 
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10.4.7. WERSAL 


Emeril's Restaurants 网 站 的 导航 非常 复杂 ， 但 设计 师 处 理 得 恰到好处 。 





这 个 网 站 有 所 谓 的 浮 出 式 导 航 (flyout navigation) 3k off-canvas 导航 (其 实现 在 更 通常 的 
叫 法 是 抽 敢 式 导 航 )， 如 图 10-34 所 示 。 当 你 点 击 顶 部 的 导航 图 标 时 ， 导 航 从 屏幕 左 侧 浮 
出 ， 并 将 内 容 推 癌 右 侧 。 你 甚至 还 能 点 击 抽 敢 式 导航 中 的 箭头 打开 其 所 包含 的 子 导航 项 。 
子 导航 项 将 其 他 导航 项 往 下 推 来 获得 显示 空间 。 再 次 点 击 箭头 将 关闭 子 导 航 项 ， 但 你 仍 会 
留 在 主导 航 上 。 
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10-34. 抽 居 式 导航 从 侧面 进入 ， 并 将 页 面 内 容 向 右 侧 推 出 





NEWSROOM 








SHOP 














当 导 航 菜单 显示 在 屏幕 上 时 ， 你 只 能 看 到 实际 页 面 最 边缘 的 内 容 。 虽 然 说 在 屏幕 上 仅 显示 


导航 肯定 是 要 更 简单 些 ， 但 保留 一 点 页 面 可 见 能 让 用 户 知 道 在 他 们 所 处 的 网 站 位 置 。 打 开 
导航 菜单 后 页 面 并 没有 消失 不 见 ， 它 仍 在 那儿 ， 之 后 你 只 需 再 点 击 下 图 标 就 能 回 到 页 面 中 。 















































在 更 宽 的 屏幕 中 ， 有 空间 可 容纳 下 整个 水 平 导航 栏 ， 如 图 10-35 所 示 。 你 只 要 点 或 者 是 按 
每 个 导航 项 即 可 打开 包含 子 导航 项 的 传统 下 拉 式 荣 单 。 





RECIPES RESTAURANTS VIDEO ABOUT EMERIL NEWSROOM SHOP 


) wr Filter by City: o 
RESTAURANTS 


RECIPES RESTAURANTS VIDEO ABOUT EMERIL NEWSROOM 
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Recent Media 9 
RESTAURANTS 


10-35; 在 一 个 更 宽 的 视 口 下 ， 有 一 个 标准 的 包含 下 拉 式 子 导航 菜单 的 水 平 导航 栏 
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这 种 导航 模式 适用 于 那些 需要 包含 很 多 导航 项 的 情况 。 如 果 样 式 设计 得 好 ， 它 看 上 去 会 非 
常 美观 。 

不 足 之 处 在 于 ， 实 现 这 种 导航 模式 的 代码 很 复杂 ， 并 要 用 到 JavaScript。 如 果 你 要 实现 这 
样 一 个 导航 ,务必 在 尽 可 能 多 的 设备 和 浏览 器 上 测试 它 ， 因 为 会 有 很 多 因素 可 能 导致 错误 
发 生 而 使 之 无 法 工作 。 








你 可 以 在 Brad Frost 的 响应 式 导 航模 式 网 站 的 Left Nav Flyout 页 找到 这 类 导航 的 代码 
( http://codepen.io/bradfrost/full/IEBrz Js 


此 外 你 也 可 以 使 用 由 Happy Cog 公司 的 Anthony Colangelo 所 编写 的 jQuery 插件 : jPanelMenu 
(http://jpanelmenu.com ) 。 


10.4.8 底部 导航 

在 窗 屏 中 ， 底 部 导航 与 本 章 前 面部 分 所 讲 的 页 脚 导 航 是 完全 相同 的 。 如 图 10-36 所 示 ， 你 
可 看 到 Grey Goose (WHE) 网 站 的 顶部 有 个 “Menu” (菜单 ) 按钮 ， 它 将 把 你 带 至 屏幕 底 
部 的 页 脚 菜单 。 
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REASON 
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10-36: 在 小 屏幕 宽度 下 ， 该 网 站 有 一 个 页 脚 导航 














它们 的 区 别 体现 在 宽屏 页 面 上 ， 不 同 于 页 脚 导 航 使 用 定位 技术 将 导航 移动 至 屏幕 顶部 的 习 
惯性 位 置 ， 底 部 导航 仍然 将 其 导航 放置 于 底部 ， 如 图 10-37 所 示 。 
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A SPARKLING REASON 
TO CELEBRAT 


OUR CRAFT VODKAS COCKTAILS GREY GOOSE FILM & TV EVENTS GOLF 
B 10-37: 在 更 宽 的 视 口 下 ， 导 航 仍 停留 在 屏幕 的 底部 
包含 多 级 导航 的 页 面 会 有 一 个 附加 的 导航 栏 置 于 主导 航 栏 之 上 ， 但 它们 仍然 在 屏幕 的 底 


部 ， 如 图 10-38 所 示 。 


GREY GOOSE ® 


VODKA 


TO CREATE GREY GOOSE VODKA, FRANÇOIS THIBAULT MAINTAINS AN UNRIVALLED LEVEL 
OF CRAFTSMANSHIP, USING ONLY THE VERY FINEST INGREDIENTS. ITS SIGNATURE 
SMOOTHNESS AND DISTINCT CHARACTER ARE THE RESULT OF AN EXTRAORDINARY 
PASSION FOR SPIRIT MAKING AND AN UNPARALLELED COMMITMENT TO THE HIGHEST 
POSSIBLE QUALITY. 

















OUR CRAFT COCKTAILS GREY GOOSE FILM & TV EVENTS GOLF 
图 10-38: 即使 向 下 滚动 屏幕 ， 导 航 仍 呆 在 屏幕 的 底部 ， 此 外 子 导航 项 位 于 主导 航 项 之 上 
虽然 这 初 看 上 去 很 奇 翌 , 但 它 却 有 实际 的 意义 。 








我 们 现在 拥有 越 来 越 多 的 触 屏 设备 ， 不 光 是 日 益 流 行 的 平板 电脑 ， 也 包括 笔记 本 电脑 及 其 
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他 更 大 的 设备 。 具 有 触摸 功能 的 桌面 显示 器 将 变 得 越 来 越 常见 ， 这 使 得 我 们 能 在 同一 个 设 
备 上 使 用 多 种 输入 方式 。 
无 论 对 于 何 种 尺寸 的 触摸 屏 ， 将 导航 置 于 屏幕 底部 都 能 实现 更 好 的 效果 。 按 钮 离 我 们 的 手 
指 越 近 ， 拇 指 就 能 越 容 易 地 触摸 目标 。Luke Wroblewski 写 了 一 篇 很 棒 的 文章 “Responsive 


Navigation: Optimizing for Touch Across Devices" (http://www.lukew.com/ff/entry.asp?1649) , 
详细 探讨 了 其 原因 。 















































但 与 此 同时 ， 打 破 网 页 设计 的 一 个 根深 带 固 的 惯例 一 一 导航 儿 乎 总 是 在 页 面 的 顶部 一 一 不 
会 是 一 路 而 就 的 。 即 便 页 面 顶部 不 是 导航 的 最 佳 位 置 ， 但 事实 上 最 重要 的 是 用 户 认为 它 会 
出 现在 那里 。 
































底部 导航 设计 需要 深思 熟 虑 及 仔细 测试 来 确保 它 不 会 有 损 于 用 户 体 验 。 所 以 不 要 马上 就 把 
你 所 有 的 网 站 都 改 成 底部 导航 模式 。 但 请 谨 记 ， 在 用 来 上 网 的 设备 发 生 改 变 时 ， 我 们 原先 
的 设计 惯例 最 终 也 需要 有 所 改变 。 


10.4.9” 跳 过 子 导航 


虽然 为 导航 找 个 地 方 放置 它 很 容易 ， 但 如 果 它 有 子 导 航 项 (同一 菜单 中 的 二 级 导航 ) 的 
话 ， 那 就 会 变 得 难得 多 。 


当 查 看 我 们 的 啊 应 式 导航 模式 实例 时 ， 你 会 看 到 ， 尽 管 某 些 例子 中 包括 了 多 级 导航 ， 但 要 
想 在 小 屏幕 上 顺利 实现 多 级 导航 ， 其 困难 重重 。 


即便 你 可 以 在 小 屏幕 设计 中 包含 所 有 选项 ， 但 用 户 如 果 不 能 同时 看 到 所 有 的 选项 ， 他 们 很 
容易 迷茫 。 





























很 多 情况 下 ， 你 可 能 最 终 决 定 在 网 站 的 小 屏 设计 中 只 采用 一 级 导航 ， 子 导航 项 则 分 散 到 网 
站 各 部 分 的 引导 页 (比如 栏目 首页 ) 供用 户 访问 。 而 在 网 站 的 宽屏 设计 中 ， 因 为 有 足够 的 
空间 ， 我 们 可 以 把 子 导航 项 包含 在 一 级 导航 的 下 拉 式 菜单 中 。 




















以 宜家 公司 网 站 为 例 。 它 有 单独 的 桌面 版 和 手机 版 网 站 〈 它 不 是 一 个 响应 式 网 站 ) ， 但 你 可 
以 将 两 者 的 设计 整合 成 一 个 响应 式 网 站 ， 并 用 媒体 查询 在 不 同 的 导航 布局 之 间 进 行 切 换 。 


























如 图 10-39 所 示 ， 将 鼠标 光标 悬 停 在 “Departments” (样板 间 ) 上 将 弹出 一 个 元 长 的 列表 ， 
大 致 与 你 在 实体 门店 所 看 到 的 相同 。 对 于 曾经 去 过 宜家 门店 的 用 户 ， 他 们 会 很 熟悉 这 个 列 
表 ， 这 使 得 网 站 易于 导航 ， 特 别 是 在 你 知道 要 找 什么 的 时 候 。 


在 手机 版 网 站 中 (如 图 10-40 所 示 )， 设 计 师 不 再 试图 将 如 此 元 长 的 下 拉 菜 单 放 入 到 主页 之 
上 ， 取 而 代 之 用 一 个 “Products”( 产 品 ) 链接 将 用 户 引导 到 一 个 单独 的 页 面 中 。 这 个 页 面 
只 包含 一 长 串 的 链接 ， 没 有 其 他 内 容 。 “产品 ”列表 非常 类 似 于 ， 但 并 不 完全 等 同 于 桌面 
站 点 “房间 ”导航 项 中 的 链接 列表 。 
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Lving room Bedroom Kitchen & Appliances ldren's IKEA — Textiles & Rugs — For Business 
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图 10-39. 桌面 网 站 上 的 主 菜单 允许 你 查看 “房间 ”列表 ， 这 与 你 在 实体 店 中 所 看 到 的 相 一 致 
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right now! 





Beds & mattresses 


图 10-40: 手机 版 网 站 有 一 个 “产品 ”菜单 导向 单独 的 页 面 
在 单独 的 页 面 中 因为 有 足够 的 空间 ， 链 接 被 恰当 地 分 隔 开 来 ， 很 容易 用 手指 触摸 。 


尽管 显示 产品 列表 需要 多 点 击 一 次 ， 但 能 让 用 户 感觉 到 他 们 是 行进 在 正确 的 方向 上 ， 除 此 
之 外 ， 它 所 导向 的 页 面 只 有 很 少 的 内 容 ， 所 以 能 够 被 很 快 地 加 载 。 


10.4.10 ”被 抛弃 的 导航 
一 些 网 站 处 理 在 手机 屏幕 上 的 导航 问题 的 方式 就 是 直接 去 掉 导 航 。 这 真 的 不 是 一 个 合适 的 
选择 ， 因 为 你 使 得 手机 用 户 无 法 访问 网 站 上 的 所 有 内 容 。 
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我 们 在 第 2 章 中 讨论 过 内 容 平 等 的 理念 。 每 个 人 都 应 该 能 够 访问 你 的 网 站 上 的 所 有 内 容 ， 
不 管 他 们 使 用 的 是 什么 类 型 的 设备 。 





























但 是 有 些 网 站 做 出 了 在 小 屏幕 上 去 掉 导 航 的 决定 ， 这 是 值得 商检 的 。 

















以 Authentic Jobs 网 站 为 例 。 如 图 10-41 所 示 ， 在 最 小 的 屏幕 宽度 下 ， 该 网 站 页 面包 含有 数 
个 按钮 允许 你 用 来 搜索 远程 工作 、 搜 索 周围 的 工作 、 通 过 关键 字 搜 索 以 及 登录 网 站 。 这 些 
按钮 下 方 的 “Refine”( 精 确 过 滤 ) 按钮 会 调 出 一 个 包含 其 他 搜索 选项 的 弹出 框 
































出 
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图 10-41: 小 屏幕 设计 包含 数 个 功能 按钮 


但 如 果 你 查看 更 宽 版 本 的 设计 ， 如 图 10-42 所 示 ， 你 将 获得 更 多 的 选项 ， 包 括 顶 部 的 导 
航 栏 。 














Showing all jobs REFINE Y 








图 10-42: 在 更 宽 的 视 口中 ， 你 将 获得 更 多 的 选项 ， 而 这 些 选项 在 小 屏幕 上 查看 网 站 时 是 无 法 看 到 的 





有 些 内容 在 较 小 屏幕 的 设备 上 是 可 以 访问 的 。 比 如 你 点 击 小 屏幕 设计 中 的 “Sign In^ (5E 
录 ) 按钮 ， 登 录 页 面 上 有 个 “发 布 职位 ”的 链接 ， 即 使 你 还 没 注册 也 可 以 发 布 职位 ， 价 格 
信息 也 在 那里 。 但 大 多 数 新 用 户 可 能 不 会 想到 去 点 击 “ 登 录 ” 按 钮 ， 他 们 会 四 处 寻找 创建 
帐号 或 发 布 职位 的 选项 ， 当 没有 找到 时 ， 他 们 会 认为 这 些 选 项 在 移动 设备 上 是 不 可 用 的 。 








网 站 中 的 “About Us" (关于 我 们 )、“Our Guarantee". (我 们 的 保证 ) fH "Contact Us” (WX 
ARM) 在 小 屏幕 设计 上 也 不 可 见 了 。 我 们 至 少 应 该 把 它们 移 到 网 站 的 页 脚 ， 而 非 舍弃 它 
们 。 但 在 这 个 小 屏幕 设计 中 根本 没有 页 脚 ， 页 面 在 列 出 最 新 的 职位 后 即 结束 了 。 


以 上 就 是 一 个 设计 师 认为 手机 用 户 不 会 想 要 在 小 屏幕 上 访问 该 网 站 的 所 有 功能 的 实际 案 
例 。 但 现实 情况 是 越 来 越 多 的 人 依赖 于 移动 设备 并 作为 他 们 访问 互联 网 唯一 的 途径 ， 或 者 
就 是 因为 方便 而 更 常 使 用 移动 设备 。 如 果 你 想 要 最 大 化 你 潜在 用 户 和 客户 ， 就 不 要 让 他 们 
访问 一 个 功能 不 全 的 小 屏 版 站 点 。 














10.4.11 用 于 宽屏 幕 的 固定 菜单 
在 制作 导航 时 ， 你 可 同时 使 导航 菜单 具有 “粘性 ”(sticky)， 是 固着 的 ， 即 当 用 户 滚动 屏 
幕 时 ， 导 航 菜 单 锁 定 在 屏幕 的 顶部 或 底部 ， 而 不 是 随 屏幕 滚动 ， 这 有 时 也 称 为 固定 式 导 航 


(persistent navigation) 











虽然 这 种 导航 模式 在 网 站 中 并 不 常见 ， 但 它 却 是 计算 机 用 户 所 熟悉 的 一 种 模式 ， 想 想 
Microsoft Word 力 至 你 的 浏览 器 ， 它 们 的 菜单 栏 总 是 位 于 顶部 不 动 。 


Facebook 是 使 用 固定 菜单 的 站 点 之 一 ， 其 顶部 导航 更 多 的 是 作为 网 站 功能 选项 菜单 而 不 是 




















用 来 在 网 站 各 部 分 之 间 进 行 导航 。 在 图 10-43 中 可 看 到 ， 即 使 用 户 不 是 在 页 面 的 开始 处 ， 
导航 也 是 在 屏幕 的 顶部 。 











nd si 
time interacting and eating. Found high in the treetops of 
Northern Madagascar, red-ruffed lemurs are mostly active during 
the day. Their diet consists of fruit, neci leaves 

the wild red-ruffed lemurs help pollinate flowers by spreading 
pollen that has stuck to their long nose. 4WeSaveSpecies 




















图 10-43. 即使 向 下 滚动 屏幕 ， 固 定 菜单 仍 停留 在 屏幕 的 顶部 
这 在 宽屏 设计 中 通常 没有 什么 问题 ， 因 为 有 足够 的 空间 容纳 下 固定 导航 栏 。 在 Facebook 网 
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站 上 ， 导 航 仅 在 视 口 宽度 大 于 等 于 1000 像素 时 才 是 固定 的 ， 而 在 较 窜 的 视 口 宽度 下 ， 它 
没有 固定 在 屏幕 顶部 。( 顺 便 说 一 句 ， E 个 例子 向 你 展示 了 可 以 如 何 使 用 媒体 查 
询 为 非 响应 式 网 站 添加 一 点 响应 能 


在 小 屏幕 上 ， 使 用 国定 莱 单 有 一 个 明显 的 缺点 ， 它 会 浪费 有 限 的 屏幕 空间 。 但 与 此 同时 ， 
又 有 便利 的 一 面 ， 能 使 用 户 在 页 面 中 间 部 分 更 容易 地 访问 导航 ， te 
































10.5 nE 


网 站 品牌 和 导航 ， 连 同 网 站 的 搜索 和 登录 等 功能 都 整合 在 网 页 顶部 ， 并 且 很 多 网 站 还 会 包 
含 多 个 导航 组 件 。 


你 需要 认真 考虑 导航 如 何 与 页 眉 中 的 其 他 的 部 分 共处 。 





10.5.1 极 简 页 眉 

美国 参议 院 国 土 安全 及 政府 事务 委员 会 网 站 采用 的 是 极 简 主 义 手 法 ， 以 单个 “Menu”( 菜 
单 ) 链接 切换 显示 一 个 包含 数 个 选项 的 覆盖 型 菜单 ， 在 它 下 面 是 委员 会 名 称 ， 如 图 10-44 
所 示 。 
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图 10-44: 最 简 页 眉 只 包含 一 个 链接 、 网 站 标题 和 搜索 杠 








但 在 图 10-45 所 示 的 网 站 的 宽屏 版 本 中 ， 提 供 了 更 多 的 选项 ， 并 用 图 形 元 素 增 强 了 网 站 名 
的 显示 效果 。 
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HOME ABOUT SUBCOMMITTEES HEARINGS MEDIA LEGISLATION & NOMINATIONS LIBRARY CONTACT 


HOMELAND SECURITY aav 


GOVERNMENTAL AFFAIRS 


Search this Site 


HOME ABOUT SUBCOMMITTEES HEARINGS MEDIA LEGISLATION & NOMINATIONS LIBRARY CONTACT 


i Ed 


HOMELAND SECURITY 
“GOVERNMENTAL AFFAIRS sino 


图 10-45: 在 更 宽 的 屏幕 中 ， 你 会 获得 额外 的 选项 及 增强 的 网 站 标志 

宽屏 设计 还 在 顶部 包含 了 社交 媒体 图 标 ， 但 在 之 前 小 屏幕 设计 并 没有 在 页 面 中 包含 它们 。 
其 实 添 加 这 些 图 标 到 页 脚 并 不 难 ， 这 样 所 有 用 户 都 能 够 使 用 它们 。 

菜单 是 通过 JavaScript 来 切换 的 ， 其 能 够 改变 包含 菜单 的 <ul> 元 素 的 高 度 ， 从 0 像素 
(切换 之 前 ， 使 其 隐藏 ) 到 能 容纳 所 有 的 菜单 项 。 

使 网 站 的 页 眉 部 分 在 窄 屏 上 尽 可 能 简单 意味 着 它 所 占用 的 宝贵 空间 更 少 ， 但 必须 确保 没有 
遗漏 任何 重要 的 选项 。 





























10.5.2 ZNA 
许多 网 站 在 页 面 顶部 会 有 其 他 的 元 素 ， 它 们 不 是 导航 的 一 部 分 ， 但 对 网 站 也 是 必 不 可 少 的 。 


例如 ， 当 在 宽屏 幕 上 六 览 佛蒙特 大 学 (University of Vermont). 网 站 时 ， 其 顶部 包含 很 多 选 
项 ， 如 图 10-46 所 示 。 





Students | Faculty | Staf | Parents | Alumni AZ | DIRECTORY | MYUVM 


n The University of Vermont 
Fd 5. 


ABOUTUVM * ADMISSIONS + ACADEMICS + STUDENT LIFE. + RESEARCH + ATHLETICS + OFFICES * OUTREACH + 





& 10-46: 在 宽屏 幕 上 浏览 佛蒙特 大 学 网 站 ， 其 页 眉 包含 很 多 不 同 的 组 件 


但 在 转 至 小 屏幕 时 ， 这 最 终 会 令 人 感到 困惑 ， 如 图 10-47 所 示 ， 页 面 顶部 有 两 个 导航 图 标 ， 
其 中 一 个 被 标注 为 “Main Menu" ( 主 菜 单 )， 可 显示 一 个 小 的 包含 两 栏 的 下 推 式 菜 单 。 
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uvm.edu 





A-Z DIRECTORY MYUVM Q 


Ihe University of Vermont 





Main Menu 


Herzog's Shadow 


During the fall semester UVM students 
collaborated with film great Werner Herzog 
Watch senior Zach Pughe-Sanford s response 





& 10-47: —— m 你 会 得 到 两 个 类 似 的 导航 图 标 和 几 个 其 他 的 链接 


男 一 个 没有 标注 的 图 
仅 是 导航 图 标 太 小 不 容易 点 按 ， 
间 ) 所 包含 的 链接 文字 比较 小 ， 
决 此 问题 )。 
未 标注 的 图 
(audience menu), 
导航 进行 补充 ， 其 显 
常 访问 的 链接 进行 




















Bl] Students, 





分 组 的 。 


标 在 左上 角 的 大 学 


标 按钮 所 显示 出 的 菜 间 


示 的 导航 项 同样 也 包 





还 因为 它 切换 出 的 下 推 式 菜单 
彼此 又 挨 得 太 近 ， 难 


























A A 
CJ odo 


Faculty, 
包含 在 主导 航 中 ， 但 在 这 上 


以 准确 点 按 (也 许 分 成 两 列 


和 来 自 于 网 站 宽屏 设计 上 页 
这 是 一 种 有 趣 的 导航 


Ea E. 实际 上 它 很 容易 被 人 忽视 ， 这 并 不 仅 





(出 现在 所 有 页 由 组 件 中 
可 以 解 





























看 最 顶端 的 受众 菜单 
类 型 ， 一 般 用 作对 主 
里 它们 是 按照 每 类 受众 最 











| & = 


272 5 10 % 


大 学 网 站 是 为 数 不 多 的 这 类 导航 真正 有 用 的 几 个 地 方 之 一 ， 因 为 他 们 的 目标 受众 一 般 有 非 
常 具体 的 需求 。 假 设 你 是 其 中 的 某 一 类 人 ， 经 常 访问 网 站 的 你 最 终 会 发 现 那 里 的 按钮 。 如 
果 不 是 ， 你 用 主导 航 也 一 样 能 够 访问 整个 网 站 。 


图 10-47 中 最 后 一 张 截图 显示 ， 当 你 点 按 右 上 角 的 搜索 图 标 时 ， 会 推出 一 个 搜索 框 ， 将 把 
下 的 内 容 往 下 推 。 


这 个 网 站 在 将 大 量 项 目 纳入 到 一 个 小 空间 中 做 的 很 好 ， 但 设计 师 们 或 许 应 该 重新 考虑 下 这 
些 项 目 是 否 真 的 全 都 要 放 在 导航 中 。 












































Hn 




















10.5.8 ”导航 图 标 
正如 你 在 很 多 导航 模式 中 所 看 到 的 ， 在 小 屏幕 上 常常 可 通过 点 按 一 个 图 标 或 其 他 图 像 与 文 
本 来 访问 导航 菜单 。 


从 为 手机 网 站 创建 导航 以 来 ， 设 计 师 们 尝试 了 很 多 不 同 的 选择 ， 但 随 着 时 间 的 推移 ， 一 
特殊 的 三 道 模 线 图 标 逐 渐 成 为 了 标准 ， 如 图 10-48 所 示 。 
































eeeoo Roaming * 6:29PM G 74% WD 
getbootstrap.com 


Bootstrap = 





Download Bootstrap | 


10-48: 标准 的 导航 图 标 是 三 道 横 线 ， 如 你 在 这 个 来 自 Bootstrap 的 例子 中 所 看 到 的 





这 有 时 称 为 “汉堡 包 图 标 ”， 因 为 它 有 点 像 两 片 小 圆 面包 夹 一 块 汉 堡 肉 饼 组 成 的 汉堡 包 …… 
咽 ， 确 实 有 点 像 。 有 时 它 也 称 为 “煎饼 图 标 ”。 


用 三 道 线 是 因为 它 给 人 的 感觉 像 是 一 个 列表 ， 但 如 果 能 让 用 户 独 立 辨别 出 那 是 一 个 导航 






































msi 
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标 ， 倒 也 不 是 说 非得 用 这 种 三 道 线 的 图 标 。 也 就 是 说 只 要 用 户 在 网 站 顶部 的 时 候 能 够 辨别 
出 那 是 最 有 可 能 点 击 来 获得 导航 的 事物 即 可 。 


各 种 可 能 的 变 体 包括 四 道 线 而 不 是 三 道 线 的 图 标 ， 点 线 相连 表 无 序列 表 的 图 标 ， 或 添加 
“菜单 ”一 词 来 确保 用 户 能 明白 其 含义 的 图 标 。 在 图 10-49 中 显示 了 这 样 一 些 赫 代 的 方案 。 


TR = 























== Web Images Sign in 





* 


ALUMNI 
10-49: 标准 图 标的 一 些 变 体 示例 


有 了 时 也 可 使 用 “菜单 ”之 外 的 词 ， 如 图 10-50 AR, “Explore” AE) 是 一 个 很 好 的 表 动 作 
Hii, (EFE “Menu” (HH) EER. “Nav” (F) 这 个 词 对 用 户 的 表意 可 能 不 是 那么 明 
显 ， 因 为 缺乏 经 验 的 用 户 可 能 想不到 这 个 词 在 页 面 顶部 表示 “navigation” (导航 ) 的 意思 。 


| EXPLORE v || 
bondgi 
science 
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10-50: 可 以 使 用 “Menu” 之 外 的 词 ， 只 要 用 户 能 明白 其 意思 
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有 些 网 站 使 用 其 他 的 符号 来 表示 导航 ， 如 图 10-51 所 示 的 齿轮 符号 。 用 户 或 许 能 猜 出 它 
导航 图 标 ， 因 为 它 是 页 面 顶部 仅 有 的 看 上 去 可 以 点 击 的 事物 。 但 由 于 齿轮 符号 通常 Sum 
联系 在 一 起 ， 尤 其 是 在 移动 设备 上 ， 因 此 将 其 用 于 不 同 的 目的 可 能 会 迷惑 用 户 。 









































10-51; Nathan Sawaya 网 站 使 用 一 个 齿轮 图 标 表 示 导 航 ， 这 可 能 会 迷惑 用 户 ， 因 为 它 通常 用 于 
应 用 程序 设置 ， 而 不 是 导航 菜单 


显示 一 个 导航 图 标 可 以 有 很 多 选择 ， 可 以 用 其 他 的 图 像 如 : 字体 图 标 、SVG 图 像 、 普 通 的 

CSS 样式 ， 其 至 是 Unicode 字符 。 实 际 上 ， 导 航 图 标 是 网 站 中 一 个 非常 小 的 资源 ， 且 由 于 

次 ， 之 后 在 网 站 的 所 有 页 面 上 显示 时 可 直接 从 缓存 读 取 ， 所 以 它 对 网 站 性 
9 影响 是 微乎其微 的 。 

如 果 你 想 了 解 更 多 显示 导航 图 标的 不 同方 式 ， 可 查看 Jordan Moore 发 表 于 Smashing 

Magazine 之 上 的 “The Semantic, Responsive Navicon” (http://mobile.smashingmagazine.com/ 












































2012/10/08/the-semantic-responsive-design-navicon/) 一 文 。 


10.5.4 其 他 图 标 

因为 在 小 屏幕 中 空间 太 有 限 ， 所 以 网 站 常 稼 会 用 图 标 来 代 埠 芝 单 项 的 文本 或 者 是 显示 隐藏 
的 组 件 。 

例如 ， 在 电 商 网 站 Skinny Ties 的 顶部 有 三 个 图 标 : 购物 车 、 半 身 人 像 和 放大 镜 。 

购物 车 图 标 是 人 们 司空 见 惯 的 ， 如 图 10-52 所 示 ， 当 在 小 屏幕 上 点 击 它 时 ， 网 站 会 根据 购物 


车 的 状态 ， 显 示 购 物 车 为 空 的 消息 ,或 者 是 购物 车 中 的 商品 清单 以 及 查看 购物 车 或 结账 的 链 
接 。 在 宽屏 版 中 ， 当 鼠标 光标 悬 停 在 购物 车 按钮 上 时 你 会 得 到 相同 的 内 容 ， 如 图 10-53 所 示 。 
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Black Collegiate Cotton Favorites View Cart Checkout 


1 item in your cart: 


Subtotal: $18.00 











Start dressing better. 
10-53: 在 宽屏 中 可 通过 将 鼠标 光标 悬 停 在 购物 车 按钮 上 获得 相同 的 信息 


在 宽屏 版 中 因为 有 更 多 的 空间 ， 所 以 包含 了 一 个 增强 特性 : 购物 车 按钮 上 会 有 个 数字 ， 能 
显示 购物 车 中 有 多 少 项 商品 ， 这 将 提升 用 户 体验 。 小 屏幕 用 户 虽 看 不 到 这 个 数字 ， 但 也 不 
会 错失 内 容 与 功能 ， 他 们 仍然 可 以 通过 点 击 查看 购物 车 来 获知 购物 车 中 有 多 少 商品 。 


在 图 10-54 中 可 以 看 到 ， 点 击 中 间 的 半身 人 像 图 标 会 出 现 “Sign I^. (登录 ) F "Register QE 
册 ) 链接 ， 点 击 放 大 镜 图 标 会 显示 一 个 搜索 框 。 
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10-54. 附加 的 图 标 显示 登录 / 注册 链接 和 搜索 框 


放大 镜 用 于 搜索 为 人 们 所 熟知 ， 但 人 像 图 标 可 能 不 是 所 有 用 户 都 熟悉 。 不 过 在 此 案例 中 这 
也 不 构成 问题 。 如 果 有 人 想 登 录 或 注册 ， 他 们 会 在 页 面 顶 部 寻找 这 些 链接 ， 因 为 这 是 大 多 
数 网 站 的 习惯 性 位 置 。 在 扫 视 页 面 顶 部 后 ， 他 们 没 发 现 包 含有 “登录 ”或 “注册 ”这 类 词 
语 的 链接 ,但 所 看 到 的 人 像 图 标 显然 最 有 可 能 是 他 们 所 要 找寻 的 选项 ， 所 以 用 户 会 之 不 犹 
Ut rbi. 
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这 称 为 可 发 现 性 〈discoverability) ， 其 理念 就 是 用 户 能 够 轻松 地 找到 并 获得 他 们 所 需要 的 
东西 ， 而 不 是 说 非 要 遵循 某 种 安排 好 的 层级 结构 才 行 。 


导航 的 最 后 一 部 分 是 浏览 选项 一 一 “Collection”( 系 列 )、“Color”( 颜 色 ) 等 。 在 小 屏幕 
上 点 击 它们 ， 如 图 10-55 所 示 ， 将 在 一 个 又 加 框 中 列 出 选中 分 类 下 的 可 选项 。 例 如 ， 选 择 
“Color” 人 允许 你 按 “Solid”( 纯 色 )、“Striped”( 条 纹 ) 等 选项 进行 浏览 。 











网 站 的 宽屏 布局 ， 也 包含 在 图 10-55 中 ， 显 示 了 一 个 类 似 的 县 加 框 ， 只 是 布局 不 同 ， 其 通 
过 放大 领带 图 像 来 充分 利用 额外 的 空间 。 











ion Color Width Fabric Pattern 


NN、 Solid — 
AS AS ra 
anda assertive 2 
Solid Striped Plaid 


图 10-55; Xx SU RAD SDDIE, TRiSTLDISS TS R ANAS 


不 管 你 用 的 是 多 大 屏幕 尺寸 的 设备 ， 优 惠 活 动 部 分 总 是 位 于 页 面 的 顶部 ， 而 宣传 语 则 会 在 
有 空间 可 用 时 变 得 更 长 。 


不 管用 户 的 设备 为 什么 样 的 屏幕 尺寸 ， 这 个 网 站 都 能 为 用 户 提 供 全 面 的 购物 体验 。 


在 小 屏幕 上 页 眉 部 分 确实 占用 了 很 多 空间 ， 但 由 于 所 有 功能 对 于 网 站 的 用 户 体验 都 很 重 
要 ， 这 并 无 不 妥 之 处 。 




















10.6 ”总结 


用 户 访问 一 个 网 站 首先 会 看 的 是 网 站 的 品牌 ， 其 能 让 用 户 知道 他 们 是 处 在 正确 的 网 站 上 。 
在 一 个 响应 式 网 站 中 ， 网 站 标志 的 大 小 和 构成 以 及 网 站 标题 都 可 以 被 改变 ， 以 便 能 充分 地 
利用 屏幕 的 可 用 空间 。 


导航 需要 精心 设计 ， 这 样 用 户 才能 顺利 和 轻松 地 浏览 网 站 。 务 必 使 导航 具有 足够 的 灵活 
性 ， 便 于 以 后 增加 或 修改 导航 项 。 

好 的 导航 关注 的 是 用 户 通过 网 站 获取 所 需 内 容 的 路 径 ， 而 不 仅仅 是 提供 网 站 内 容 的 层级 
分 类 。 
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设计 导航 布局 应 乘 承 小 屏幕 优先 、 精 简 且 只 包含 真正 需要 的 导航 项 的 理念 。 


你 不 需要 从 零 开 始 设 计 一 个 响应 式 导航 ， 有 很 多 通用 的 响应 式 导航 设计 模式 可 作为 你 自己 
导航 的 基础 。 使 用 哪 一 种 模式 取决 于 在 导航 中 有 多 少 导航 项 ， 是 否 需 要 子 导 航 以 及 你 的 网 
站 是 否 必须 支持 那些 不 使 用 Javascript 的 用 户 。 











当 围绕 导航 设计 页 眉 时 ， 也 应 从 小 屏幕 开始 ， 你 可 以 把 页 眉 做 到 最 简化 ， 只 要 所 有 内 容 仍 
是 可 通过 导航 或 其 他 链接 访问 的 。 








有 多 种 选择 可 用 来 向 用 户 表明 有 导航 可 供 使 用 。 很 多 网 站 使 用 三 道 线 的 “汉堡包 ”图 标 ， 
但 你 也 可 以 使 用 其 他 的 图 标 或 者 就 使 用 “菜单 ”或 “浏览 ”之 类 的 词 代 禁 。 


务必 使 导航 在 所 有 屏幕 宽度 下 都 保持 一 致 ， 这 样 你 就 不 会 是 跨 平 台 访问 的 用 户 感到 迷惑 。 








在 第 11 章 中 ， 我 们 将 探讨 如 何 提 高 网 站 性 能 。 
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第 11 章 
性 能 





响应 式 网 站 往往 性 能 不 佳 一 一 人 它们 需要 更 长 的 加 载 和 这 当时 间 ， 这 是 响应 式 设计 常 被 诉 病 
的 一 点 。 


对 于 很 多 响应 式 网 站 来 说 ， 确 实 如 此 ， 但 并 不 是 因为 响应 式 网 站 天 生 就 慢 ， 而 是 因为 这 些 
网 站 在 开发 时 没有 把 性 能 作为 其 目标 之 一 。 实 际 上 有 很 多 的 技术 能 够 使 网 站 更 轻 、 更 快 。 














在 本 章 中 ， 我 们 将 首先 谈 谈 性 能 的 重要 性 ， 以 及 为 什么 在 设计 网 站 的 时 候 就 应 该 考虑 性 能 
问题 。 

然后 ， 我 们 将 一 步 步 探 究 浏 览 器 在 加 载 和 泻 染 网 页 时 都 发 生 了 什么 ， 以 便 你 能 够 更 好 地 了 
解 所 有 发 生 的 事情 以 及 在 什么 地 方 容易 出 现 性 能 问题 。 











接 下 来 ， 我 们 会 学 习 如 何 测 试 网 站 的 性 能 ， 并 找 出 性 能 瓶颈 在 什么 地 方 。 














最 后 ， 我 们 将 深入 探讨 如 何 提 高 网 站 的 性 能 。 我 们 将 在 代码 清理 、 最 小 化 HTTP 请 求 、 压 
缩 文件 、 人 允许 浏 览 器 缓存 和 去 除 阻碍 加 载 的 JavaScript 脚本 等 方面 进行 讨论 。 


[小 贴 士 ] 
解决 网 站 性 能 问题 最 好 的 一 个 资源 是 谷歌 的 PageSpeed 工具 集 ( https://developers.google. 
com/speed/pagespeed/ )。 本 章 中 的 一 些 建议 即 基于 谷歌 的 PageSpeed Insights Rules， 并 根据 


知识 共享 协议 3.0 署名 许可 〈http:/creativecommons.org/licenses/by/3.0/ ) 中 描述 的 条 款 使 用 。 
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11.1 性 能 的 重要 性 

研究 表明 ， 用 户 判 断 一 个 网 站 是 否 具 有 视觉 吸引 力 的 时 间 不 过 零点 几 秒 ， 这 就 是 第 一 印象 
如 此 重要 的 原因 。 如 果 用 户 对 网 站 的 第 一 印象 是 在 他 能 看 到 点 什么 之 前 屏幕 会 出 现 5~10 
秒 的 空白 ， 网 站 对 她 还 能 有 多 少 吸引 力 ? 

















2012 年 一 项 由 Strangeloop 公司 对 Alexa 排名 前 100 的 零售 网 站 所 做 的 研究 发 现 ， 首 次 访 
问 这 些 网 站 的 平均 加 载 时 间 是 7.14 E 











7 秒 的 时 间 似 乎 并 不 长 ， 但 当 用 户 盯 着 空白 屏幕 等 待 时 就 会 觉得 它 无 比 漫长 。 你 可 自己 试 
试 计数 到 7 秒 来 体会 一 下 。 即 使 用 户 不 得 不 等 待 ， 他 们 的 第 一 印象 会 觉得 网 站 在 浪费 他 们 
的 时 间 。 无 论 最 终 网 站 看 上 去 有 多 好 ， 粳 糕 的 第 一 印象 会 始终 停留 在 他 们 脑海 中 。 

更 有 可 能 的 是 ， 用 户 不 会 等 待 ， 他 们 通常 的 期 望 是 网 站 能 在 二 三 秒 内 加 载 完 成 。Econsultancy 
公司 (一 家 全 球 领先 的 咨询 公司 ， 专 注 于 数字 营销 和 电子 商务 ) 在 2012 年 的 一 项 研究 中 
发 现 ，74% 的 移动 用 户 在 网 站 的 加 载 时 间 超过 5 秒 之 后 会 选择 放弃 等 待 。” 

然而 ， 最 重要 的 指标 不 是 网 站 实际 有 多 快 ， 而 是 用 户 鳄 觉 它 有 多 快 。 性 能 指标 可 以 告诉 我 
们 加 载 和 渲染 网 页 各 部 分 需要 多 长 时 间 ， 但 如 果 用 户 在 整个 页 面 加 载 完 成 之 前 就 能 在 屏幕 
上 看 到 些 内 容 ， 效 果 就 完全 不 同 了 。 

除了 网 站 的 用 户 体验 之 外 ， 优 化 网 站 性 能 还 有 一 个 不 太 为 人 所 知 但 同样 重要 的 原因 : 它 会 
在 搜索 引擎 结果 中 带 来 更 好 的 位 置 排名 。 
2010 年 ， 谷 歌 宣布 网 站 速度 将 是 其 搜索 引擎 排名 算法 中 的 一 个 因数 ， 对 桌面 和 手机 网 站 来 
说 ， 加 载 缓慢 的 网 站 将 在 搜索 排名 中 得 到 处 罚 。 因 为 网 站 速度 影响 用 户 体验 ， 更 快 的 网 站 
意味 着 较 好 的 质量 ， 相 比较 慢 的 网 站 用 户 更 喜欢 前 者 。 


11.2 性 能 作为 设计 元 素 
性 能 对 网 站 的 用 户 体验 至 关 重 要 ， 它 需要 作为 设计 元 素来 考虑 ， 而 不 仅仅 是 技术 规范 。 


这 意味 着 项 目 从 一 开始 ， 就 应 该 把 性 能 作为 项 目 文档 的 一 部 分 ， 如 同 建议 书 、 工 作 说 明 
和 可 交付 物 一 样 。 













































































d 








设计 人 员 和 开发 人 员 需 要 在 整个 过 程 中 共同 努力 提升 网 站 的 性 能 。 否 则 就 会 出 现 这 样 的 情 











iE 1: Strangeloop 公司 发 布 的 2012 年 秋季 报告 “State of the Union: Ecommerce Pages Speed & Web Performance" 
(http://www.strangeloopnetworks.com/resources/research/fall-2012-state-of-the-union/success/) 。 

{È 2: Econsultancy 公司 的 David Moth F 2012 年 10 H 23 日 发 表 的 “Mobile Websites and Apps Optimization 
Best Practice Guide" (https://econsultancy.com/blog/10936-site-speed-case-studies-tips-andtools-for- 


improving-your-conversion-rate ) 。 
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况 : 设计 师 想 出 好 创意 但 完全 不 了 解 性 能 开销 ;开发 人 员 宣 目 实现 这 些 创 意 ， 只 因为 这 是 
设计 师 提 供 的 。 通 常 ， 小 的 设计 调整 可 能 会 引发 戏剧 性 的 性 能 改变 ， 所 以 在 设计 过 程 中 需 
留 出 余地 以 便 能 做 出 这 些 调整 。 

如 果 自 始 自 终 向 客户 阐述 性 能 的 重要 性 ， 那 在 涉及 性 能 的 争论 中 就 很 容易 与 客户 一 道 做 出 
正确 的 决 择 。 


11.2.4 网 络 连接 
性 能 问题 很 容易 被 归 答 于 响应 式 设计 ， 但 真相 是 我 们 习惯 于 创建 肥 肿 的 网 站 。 


自 互 联网 出 现 之 后 的 20 年 里 ， 计 算 机 性 能 飞速 提升 ， 变 得 更 快 、 更 强 。 而 我 们 在 家 中 和 
办 公 室 中 的 上 网 速度 也 同样 在 迅速 变 快 〈( 快 了 许多 倍 )。 






































我 们 的 电脑 可 以 做 各 种 各 样 不 可 思议 的 事 ， 所 以 我 们 希望 网 站 也 能 做 这 样 的 事 ; 





T3 
Ho 














当 我 们 设计 或 开发 网 站 时 ， 通 常 是 在 办 公 室 或 家 中 坐 在 具有 高 速 网 络 连 接 的 电脑 前 。 这 很 
容易 使 我 们 忘记 ， 并 不 是 每 个 人 都 享有 这 样 快速 的 网 络 连接 。 























还 记得 拨号 上 网 吗 ? 那 似乎 已 是 久远 的 记忆 。 每 次 连接 上 网 时 我 们 都 会 听 到 调制 解 调 器 
(GE) 发 出 尖锐 的 哺 叫 声 …… 加 载 任何 内 容 都 要 等 上 一 会 ， 但 我 们 并 不 是 太 介 意 ， 因 为 
没 别 的 选择 。 并 且 那 时 我 们 感觉 它 还 不 是 很 慢 ， 因 为 在 十 年 前 网 站 是 非常 轻 量 的 。 








今天 ， 只 有 约 3% 的 美国 人 在 家 仍然 使 用 拨号 方式 连 和 互联网。 几乎 没有 多 少 人 ， 对 吧 ? 
咽 ， 美 国有 3 亿 人 口 ， 所 以 3% 就 是 900 万 。 哦 ， 好 吧 ， 或 许 那 就 是 我 们 需要 担心 的 少数 
人 。 但 先 暂且 不 管 他 们 ， 因 为 我 们 真正 想 要 探讨 的 问题 是 移动 互联 网 访问 。 


虽然 各 种 规格 的 设备 性 能 越 来 越 强 ， 但 我 们 的 连接 〈 至 少 是 其 中 一 些 ) 却 变 慢 了 。 这 又 是 
为 什么 呢 ? 


























11.2.2 平衡 
问题 在 于 如 何在 性 能 与 其 他 方面 (比如 显示 效果 ) 之 间 取得 平衡 。 

















你 可 以 用 HTML, CSS 和 JavaScript 做 出 各 种 令 人 惊叹 的 事情 ， 使 得 你 的 网 站 看 上 去 非常 
酷 炫 并 能 做 令 人 难以 置信 的 事 。 但 是 网 站 的 主要 目标 并 非 是 为 了 好 看 ， 而 是 向 用 户 提供 信 
息 及 与 用 户 交互 。 如 果 为 了 追求 视觉 效果 而 使 网 站 变 慢 ， 那 么 实际 上 是 在 妨碍 此 目标 ， 你 
需要 重新 审视 所 做 的 事情 。 


11.2.3 ” 肽 肿 的 网 络 
首先 需要 指出 的 是 ， 缓 慢 的 性 能 并 非 是 啊 应 式 设计 所 独 有 的 问题 ， 只 不 过 在 响应 式 网 站 
































上 更 受 关注 ， 因 为 我 们 在 意 响 应 式 网 站 在 移动 设备 上 的 表现 ， 而 移动 设备 的 网 络 连接 通 


常 较 慢 。 























随 着 时 间 的 推移 ， 网 站 会 变 得 越 来 越 腔 肿 。 


根据 HTTP Archive (其 基于 数 以 千 计 最 受 欢迎 的 网 站 编制 统计 数据 ) 的 数据 ， 在 过 去 的 两 
年 里 网 页 的 平均 重量 从 807 KB 增加 到 了 1492 KB。; 仅 是 查看 网 站 上 一 个 页 面 就 要 下 载 近 
1.5 MB 的 数据 | 



































当然 ， 这 包括 泻 染 网 页 所 需 的 所 有 事物 : HTML, CSS, JavaScript, BiR, WREE, Flash 


A 
和 


不 管 网 站 是 不 是 响应 式 的 ， 都 能 够 做 很 多 事情 使 之 变 得 更 快 ， 并 且 在 本 章 中 我 们 讨论 的 大 
多 数 内 容 适 用 于 所 有 网 站 ， 而 不 只 是 响应 式 网 站 。 即 使 你 的 网 站 不 是 响应 式 的 ， 也 会 有 人 
用 移动 设备 及 低速 连接 访问 它 ， 因 此 尽 你 所 能 使 网 站 更 快 也 是 必要 的 。 


当然 ， 事情 没 那么 简单 。 响 应 式 设计 只 是 一 个 工具 ， 用 或 不 用 响应 式 设计 来 制作 一 个 好 的 
网 站 是 由 网 站 的 设计 人 员 和 开发 人 员 决 定 的 。 

简单 地 采用 桌面 网 站 设计 并 向 其 添加 响应 能 力 常常 导致 代码 腔 肿 。 因 此 最 好 是 从 头 做 起 并 
进行 精心 地 设计 以 确保 网 站 的 性 能 。 









































[小 贴 士 ] 
想 要 了 解 更 多 有 关 提 高 响应 式 网 站 性 能 的 知识 ， 阅 读 Tim Kadlec 的 文章 “Responsive 
Responsive Design ” (http://24ways.org/2012/responsive-responsive-design/ )。 


* N= + 
11.3 网 页 加 载 与 泻 染 方式 
要 了 解 影响 网 页 性 能 的 所 有 因素 ， 我 们 必须 明白 洽 业 网 页 时 所 发 生 的 每 件 事 情 。 浑 染 是 浏 
览 器 读 取 HTML, CSS 及 其 他 资源 ， 然 后 在 浏览 器 窗口 中 显示 网 页 的 过 程 。 


下 面 我 们 会 对 此 做 个 简化 的 解释 ， 即 使 你 不 是 IT 专家 也 能 理解 ， 但 其 中 涵盖 了 所 有 会 对 
性 能 造成 影响 的 主要 部 分 。 有 点 长 ， 但 请 耐心 看 完 。 





























在 本 章 后 面部 分 ， 我 们 将 讲述 演 染 过 程 中 的 各 个 部 分 是 如 何 影 响 性 能 的 ， 以 及 你 可 以 怎样 
做 来 提高 性 能 。 但 在 开始 之 前 ， 有 必要 了 解 在 整个 过 程 中 各 个 不 同 的 部 分 是 如 何 组 合 在 一 
起 的 ， 以 及 所 有 的 事物 是 以 怎样 的 顺序 发 生 的 。 











注 3: 更 多 的 相关 信息 ， 查 看 HTTP Archive 上 的 “Interesting stats” (http://httparchive.org/interesting. 
php?a-All&I-Jul96201596202011) 。 
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11.3.1 延迟 
Bb. TTJFG3XL / ie A Hau SE is EHJDU zs. AR ALPES E d BERE 




















延迟 是 连接 到 网 络 运营 商 所 需 的 时 间 。 


和 如果 你 是 在 一 个 固定 连接 之 上 【比如 家 中 或 办 公 室 中 的 宽带 连接 )， 你 无 需 对 此 担心 ， 
为 你 与 运营 商 网 络 是 持续 相连 的 。 


但 如 果 你 使 用 的 是 移动 网 络 ， 其 在 任何 给 定 的 时 间 点 上 带宽 都 是 有 限 的 ， 因 此 你 没有 一 个 
持续 的 连接 ， 只 有 你 主动 请 求 或 向 互联 网 发 送信 息 时 ， 网 络 才 会 连接 上 。 


所 以 ， 移 动 设备 为 了 加 载 一 个 网 页 首先 需要 连接 上 网 络 。 而 要 连接 网 络 ， 设 备 需 要 联系 当 
地 的 基站 并 告 之 它 需 要 启动 一 个 连接 。 



































在 理想 的 情况 下 ， 基 站 会 马上 应 答 并 建立 连接 。 但 情况 并 不 可 能 总 是 在 理想 状态 下 ， 所 以 这 
个 过 程 最 终 可 能 要 花 去 几 秒 时 间 ， 而 我 们 甚至 还 设 开 始 加 载 网 页 呢 ! 不 幸 的 是 ， 你 (网 站 所 
有 者 /开发 人 员 ) 无 法 为 用 户 加 速 这 部 分 过 程 ， 但 你 需要 知道 ， 这 些 延 迟 是 可 能 存在 的 。 


最 初 的 连接 速度 〈 延 迟 ) 取决 于 同一 时 间 有 多 少 设备 在 尝试 获得 连接 。 例 如 ， 如 果 是 在 一 
个 重大 体育 赛事 中 ， 或 者 在 大 城市 中 ， 可 能 需要 更 长 的 时 间 才 能 连接 上 网 络 ， 因 为 在 同一 
时 间 内 尝试 连接 上 网 的 人 太 多 。 















































连接 速度 


在 你 建立 了 一 个 连接 之 后 ， 加 载 速度 能 有 多 快 可 取决 于 以 下 几 个 因素 ， 其 也 不 是 你 能 控 
制 的 。 


一 个 是 网 络 质量 ， 不 同 的 运营 商 使 用 不 同 的 频段 ， 因 此 一 家 移动 网 络 运营 商 的 连接 速 
度 可 能 会 快 过 另 一 家 。4G 网 络 连接 要 快 过 3G 网 络 连接 ， 而 这 又 取决 于 所 使 用 的 移动 
设备 是 否 支持 4G 网 络 。 


设备 与 基站 的 距离 ， 以 及 是 在 家 中 的 网 络 上 还 是 在 漫游 中 ， 这些 因 素 也 很 重要 。 此 外 ， 

如 果 移 动 设备 有 其 他 访问 互联 网 的 应 用 程序 (比如 地 图 ) 在 后 人 台 运 行 ， 这 也 会 抱 慢 内 
容 出 现在 网 页 浏览 器 中 的 速度 。 

所 有 这 些 因素 都 会 大 大 延迟 页 面 的 加 载 时 间 。 你 无 法 控制 它们 ， 但 用 户 并 不 一 定 知 道 ， 

他 们 只 希望 页 面 能 快速 加 载 。 因 此 你 需要 使 你 能 控制 的 部 分 尽 可 能 地 快 。 











11.3.2 DNS 请 
在 建立 了 连接 之 后 ， 浏 览 器 将 向 DNS 服务 提供 商 (通常 就 是 互联 网 服务 提供 商 ) 发 出 请 求 。 




















DNS (域名 服务 系统 ) 将 URL (Uniform Resoure Locator， 统 一 资源 定位 器 ， 你 可 以 理解 
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为 网 址 ) 转换 为 全 地 址 ， 这 样 浏览 器 才 知 道 去 哪儿 找到 网 站 。 在 DNS 服务 商 发 回 正 确 的 
卫 地 址 后 ， 浏 览 器 就 知道 网 站 是 托管 在 何 处 了 。 





浏览 器 是 基于 特定 的 URL (比如 http:Wwww.example.com) 来 搜寻 网 站 的 。 不 过 ， 网 站 实 
际 上 是 由 数字 化 的 IP 地 址 标识 的 ， 比 如 它们 是 托管 在 IP 地 址 为 192.0.2.0 的 服务 器 上 。 





11.3.8 EEN 

不 过 ， 输 入 一 个 网 址 并 不 一 定 直接 进入 一 个 对 应 的 IP 地 址 。 有 时 你 输入 的 网 址 会 被 重 定 癌 
到 另 一 个 网 址 。 例 如 ， 如 果 你 在 浏览 器 地 址 栏 中 输入 网 址 www.washpost.com， 在 浏览 器 加 
载 网 站 时 这 个 网 址 实际 变 成 了 www.washingtonpost.com, 


重 定向 发 生 在 DNS 请 求 过 程 之 中 ， 在 浏览 器 获得 实际 网 站 的 IP 地 址 之 前 。 


重 定向 会 对 性 能 造成 影响 ， 它 会 增加 加 载 过 程 所 需 的 时 间 。 这 不 仅 适用 于 从 一 个 域名 重 定向 
到 另 一 个 域名 ， 也 适用 于 重 定向 到 同一 网 站 的 不 同 子 域名 上 ， 比 如 给 URL 添加 www. 前 级 ， 
使 所 有 其 他 的 子 域名 都 重 定向 至 www 子 域名 (因此 example.com 将 变 成 www.example.com ) 。 




















如 果 重 定向 只 发 生 一 次 ， 比 如 重 定向 至 www 子 域名 ， 问 题 不 大 ， 但 有 时 网 址 是 以 非常 复 
杂 的 方式 设置 的 ， 以 致 于 在 到 达 真 正 网 站 的 过 程 中 要 经 过 多 次 重 定向 ， 这 将 会 增加 页 面 的 
加 载 时 。 














11.3.4 HTTP 请 5 
一 旦 浏览 器 找到 该 网 站 所 在 的 服务 器 的 IP 地址， 浏览 器 会 向 服务 器 发 送 一 个 HTTP 请 求 ， 
请 求 服务 器 发 送 网 址 对 应 的 页 面 给 它 。 


HTTP 请 求 可 以 在 HTTP 报头 中 包含 额外 的 信息 (这 被 当 作 请 求 的 元 数据 )。 一 个 关键 信息 
是 用 户 代 理 (user agent)， 其 标识 请 求 者 的 操作 系统 和 浏览 器 信息 。 

















在 某 些 情况 下 ， 网 站 会 设置 成 服务 器 将 基于 用 户 代理 串 中 所 包含 的 信息 来 返回 一 个 不 同 的 
网 站 。 

例如 ， 如 果 网 站 服务 器 知道 请 求 是 一 个 手机 浏览 器 发 起 的 ， 它 可 能 发 送 的 是 移动 版 网 站 
(m-dot 站 点 ) 而 不 是 常规 网 站 。 不 幸 的 是 ， 虽 然 用 户 代 理 串 大 多 数 时 候 是 准确 的 ， 但 也 并 
非 总 是 绝对 正确 (可 被 人 为 改变 ， 比 如 在 谷歌 Chrome 浏览 器 中 ) 。 





11.3.5 发送 HTML 文 件 
当 服 务 器 收 到 HTTP 请 求 时 ， 它 会 做 出 回应 ， 包 含 一 个 HTTP 报头 和 请 求 的 文件 (在 这 里 
是 HTML 文件 )。 








284 | 第 11 章 


T 


在 回应 中 ， 











HTTP 报头 可 能 包含 额外 的 可 由 浏览 器 使 用 的 信息 。 其 中 一 个 重要 的 信息 是 是 








否 允 许 浏 览 器 缓存 资源 及 可 以 缓存 多 长 时 间 。 这 个 信息 由 网 站 服务 器 提供 (你 可 以 在 网 站 
服务 器 上 调整 这 些 设置 )， 而 不 是 包含 在 HTML 文件 中 。 





你 可 以 使 用 Google Chrome 中 的 开发 者 工具 (Developer Tool) 查看 HITP 标 头 ， 如 图 11-1 
所 示 。 在 网 络 选 项 卡 中 ， 点 击 第 一 列 中 的 任 一 资源 。 在 右面 板 中 ， 你 会 看 到 HTTP 请 求 及 
回应 的 报头 信息 。 
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7 requests | 5.2 KB transferred 


图 11-1; 使 用 Google Chrome 开发 者 工具 看 到 的 《华盛顿 邮 报 》 网 站 的 HTTP 报头 
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11.3.6 解压 
通常 ， 诸 如 HTML、CSS x JavaScript 这 样 的 文件 将 使 用 gzip 算法 压缩 ， 这 样 文件 能 变 得 
更 小 ， 下 载 速 度 也 就 更 快 。 








当 浏 览 器 发 送 请 求 时 ，HTTP 报头 中 的 一 个 参数 将 告诉 服务 器 ， 浏 览 器 是 否 能 接受 压缩 的 





文件 (大 多 数 现代 浏览 器 都 可 以 )。 如 果 浏 览 器 能 够 接受 ， 服 务 器 将 发 送 一 个 压缩 过 的 文 
件 。 否 则 ， 它 将 发 送 一 个 未 压缩 的 文件 ， 甚 可 能 需要 花费 更 长 的 时 间 来 加 载 。 
一 旦 浏览 器 接收 到 压缩 文件 之 后 ， 它 会 立即 解压 整个 文件 。 


11.3.7 DOM 


接 下 来 济 


览 器 将 解析 HTML， 创 建 一 个 DOM (文档 对 象 模型 )。 本 质 上 ， 网 页 的 DOM 代 
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表 将 要 显示 的 页 面 的 一 个 动态 模型 。DOM 在 起 初 与 页 面 的 HTML 是 相同 的 。 但 如 果 有 改 
变 页 面 内 容 的 JavaScript 事件 发 生 ， 改 变 的 实际 是 DOM， 而 不 是 HTML。 

















例如 ， 你 可 能 有 一 个 脚本 ， 人 允许 你 通过 点 击 “more”( 更 多 ) 链接 直接 在 页 面 上 查看 额外 
的 文本 。 页 面 的 HTML 代码 中 并 不 包含 额外 的 文本 ， 且 在 首次 加 载 页 面 时 ，DOM 中 也 没 
有 。 但 在 你 点 击 “more” 链 接 ， 激 活 脚本 后 ， 额 外 的 文本 将 被 添加 到 DOM 中 的 适当 位 置 
并 显示 在 页 面 上 。 


























你 可 以 在 CSS-Tricks 上 找到 由 Chris Coyier 所 写 的 “What Is the DOM?" (http://css-tricks. 
com/dom/) 一 文 ， 其 包含 了 对 DOM 更 详细 的 解释 。 














11.8.8 泻 染 <head> 元 素 
—H DOM 准备 就 绪 ， 浏 览 器 开始 谊 染 HTML 文档 。 它 从 «head» 中 的 第 一 个 元 素 开 始 ， 
逐一 处 理 每 个 元 素 。 











1. 外 部 资源 
当 浏览 器 遇 到 链接 外 部 文件 (如 CSS x JavaScript 文件 ) 的 元 素 时 ， 它 会 加 载 该 文件 。 


2. 并 行 加 载 
每 个 外 部 CSS 或 JavaScript 文件 需要 一 个 单独 的 HTTP 请 求 (也 就 是 一 个 对 服务 器 的 请 求 )。 


尽管 老 版 本 浏览 器 一 次 只 能 下 载 一 个 文件 ， 但 新 的 浏览 器 可 以 同时 下 载 多 个 资源 。 这 使 得 
这 个 过 程 会 进行 得 快 一 些 ， 然 而 它 一 次 也 只 能 加 载 几 个 文件 ， 如 果 有 很 多 文件 的 话 并 不 能 
立即 完成 加 载 。 
如 果 浏 览 器 缓存 了 资源 ， 它 们 可 能 根本 不 需要 重新 下 载 。 大 多 数 时 候 ， 当 你 加 载 一 个 网 页 
时 ， 浏 览 器 将 缓存 (或 在 本 地 保存 ) 资源 ， 比 如 图 像 、CSS 文件 和 JavaScript 文件 ， 所 以 
在 你 浏览 同一 网 站 的 其 他 页 面 或 者 如 果 你 在 设 定 的 时 段 内 又 返回 到 网 站 时 它们 都 不 需要 再 
次 下 载 。 这 意味 着 用 户 在 网 站 中 访问 的 第 一 个 页 面 通常 会 比 后续 页 面 花费 更 长 的 时 间 来 加 
载 ， 因 为 之 前 还 没有 资源 被 缓存 。 

文件 可 被 缓存 的 时 间 是 在 网 站 服务 器 上 设置 的 ， 时 间 范 围 可 以 是 24 小 时 到 一 年 不 等 。 


3. 单线 程 执行 
JavaScript 是 单线 程 的 ， 这 意味 着 浏览 器 一 次 只 能 执行 (运行 ) 一 个 文件 。 




































































浏览 器 执行 它 所 遇 到 的 每 个 <script> 元 素 (从 «head» HHY <script> 开始 )， 这 包括 
所 有 的 内 联 脚 本 和 外 部 脚本 ， 它 们 只 有 在 下 载 完 成 之 后 才能 开始 执行 。 


在 开始 执行 heads 中 的 脚本 之 时 ， 用 户 看 到 的 仍然 是 空白 页 面 ， 因 为 浏览 器 尚未 开始 处 
E «body» 中 的 HTML 代码 。 






































n 
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11.8.9 泻 染 <bodqy> 元 素 
在 浏览 器 完成 对 «head» 元 素 的 处 理 之 后 ， 它 开始 演 染 ebody» 元 素 。 





浏览 器 从 «body» 中 的 第 一 个 元 素 开始 ， 逐 一 对 元 素 进行 泻 染 (一 次 泻 染 一 个 )。 浏 览 器 
需要 知道 每 个 元 素 应 是 什么 样子 ， 将 出 现在 页 面 的 什么 位 置 ， 因 此 它 会 检查 CSS 以 决定 怎 
么 做 。 


1. 加 载 HTML 图 像 

当 浏 览 器 过 到 «img» 元 素 时 ， 它 开始 加 载 对 应 的 图 像 文件 。 如 果 图 像 文 件 较 大 ， 这 可 能 需 
要 一 段 时 间 ， 因 此 ， 用 户 在 图 像 加 载 完成 之 前 ， 可 能 会 在 页 面 上 该 图 像 所 在 位 置 看 到 空白 。 
过 去 常见 的 做 法 是 在 HTML 标记 中 指定 每 个 图 像 的 height 和 width 属性 ， 为 图 像 “ 保 
留 ”一 个 正确 尺寸 的 空白 区 块 。 但 在 响应 式 设计 中 ， 图 像 的 大 小 可 能 会 随 视 口 宽度 的 不 同 
而 改变 ， 所 以 这 种 做 法 不 再 适合 。 
























































为 此 的 代价 是 ， 图 像 只 有 在 加 载 完 成 后 ， 浏 览 器 才能 知道 图 像 的 尺寸 ， 并 有 可 能 必须 回流 
页 面 的 部 分 内 容 (在 布局 中 移动 内 容 ) 来 为 图 像 腾 出 空间 。 


2. 加 载 背景 图 像 
当 浏 览 器 遇 到 元 素 设 置 有 背景 图 像 (通过 CSS 应 用 ) 时 ， 它 会 去 加 载 背 景 图 像 。 






































3. 更 多 的 JavaScript 
在 «body» 元 素 中 也 可 以 包含 JavaScript， 链 接 外 部 文件 或 者 作为 内 联 脚 本 都 行 。 浏 览 器 无 
法 同时 泻 染 页 面 和 执行 脚本 。 所 以 ， 如 果 训 览 右 在 <body> 中 遇 到 一 个 «script» 元 素 ， 
在 执行 对 应 的 脚本 时 它 会 停止 泻 染 ， 直 到 脚本 执行 完毕 才 继 续 泻 染 页 面 。 




















11.3.40 onload 事件 


当 页 面 中 的 所 有 内 容 都 加 载 和 泻 染 完毕 后 ， 将 执行 onload 事件 中 的 脚本 。onload 事件 
是 指 页 面 一 完成 加 载 即 触发 的 事件 。 


各 已 mi -= 
11.4 性 能 测量 
可 以 用 一 些 在 线 工具 测试 网 站 的 性 能 ， 它 们 会 预 估 你 的 页 面 所 需要 的 下 载 时 间 。 


















































Akamai Mobitest 公司 的 Mobitest (http://mobitest.akamai.com/m/index.cgi) 是 一 个 伟大 的 工 
具 ， 可 以 帮助 你 测算 网 站 的 速度 。 只 要 输入 页 面 的 网 址 ， 在 儿 个 不 同 的 移动 设备 中 选择 一 
个 ， 然 后 请 求 运行 测 试 即 可 。 所 有 测试 请 求 都 在 一 个 队列 内 进行 ， 因 此 你 需要 等 上 一 小 
会 ， 在 测试 运行 结束 后 你 可 以 获得 页 面 的 平均 加 载 时 间 (以 秒 为 单位 ) 和 平均 大 小 (以 
KB 为 单位 )， 如 图 11-2 所 示 。 



























































MQPBITEST Test Your Website Performance On A Mobile 


Mobitest 


Mobile Performance Results for: 


on iPhone 4, IOS 7 


Your website's results: 
News 》 
Average Load Time Average Page Size 


Sports » 4.00s 45.50kb 
Music 
Radio One 


Television > f Facebook 国 Tweet 国 ShareThis > View HAR file 
cose 

Add the CBC Mobile sito to your iPhono; 

Tap LÊ and click "Add to Home Screen". 


v 


Device 








11-2: Mobitest 中 的 速度 测试 结果 


例如 ， 在 iPhone 4 上 测试 Yahoo.com 的 加 载 时 间 是 5.41 秒 ， 页 面 平均 大 小 是 853.49 KB, 
在 同一 部 手机 上 测试 Google.com 的 加 载 时间 是 2.9 秒 ， 页 面 平均 大 小 是 359.47 KB. 


你 也 可 以 点 击 “View HAR fle”( 查 看 HAR 文件 ) 来 查看 显示 页 面 资 源 加 载 顺序 的 瀑布 
图 ， 以 及 每 个 资源 加 载 所 花费 的 时 间 。 这 能 让 你 了 解 是 否 有 哪个 特定 的 页 面 资 源 存在 问 
题 一 一 例如 ， 一 个 第 三 方 插件 明显 拖 慢 了 网 站 的 速度 。Mobitest 的 工作 方式 如 同一 个 代理 





服务 器 ， 使 用 真实 的 手机 测试 你 的 网 站 ， 因 此 它 给 出 的 结果 是 非常 准确 的 。 














YSlow (http://developer.yahoo.com/yslow/) 是 另 一 个 页 面 性 能 分 析 工 具 ， 如 











图 11-3 所 示 。 


它 是 一 个 浏览 器 插件 (或 是 桌面 /移动 浏览 器 书签 工具 )。 当 它 分 析 一 个 网 站 时 ， 会 评估 经 























常 出 现 问 题 的 那些 区 域 ， 并 给 出 网 站 优化 建议 。 例 如 ， 它 可 能 会 指出 生成 的 
多 了 ,或 者 可 通过 最 小 化 CSS 文件 来 节省 一 些 流量 。 


HTTP 请 求 太 
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eoo chrome-extension:/ /ninejjcohidippngpapiilnmkgllmakh/yslow.html&8 ud 
Home | Grade | Components | statisties mulesers [ YSlow(V2) [EIR] | Mee: 
Grade ©) overall performance score 66 Ruleset applied: YSlow(VZ) URL http wwwcbecal 
ALL(23) FILTER BY CONTENT (&) | COOKIE G2 | C$$ 06) | IMAGES Q) | JAVASCRIPT (4) | SERVER (6) W Tweet KL Share 


PRSETER BINE, VERE AREE 1 Grade F on Make fewer HTTP requests 
FK Use a Content Delivery Nerwork (CON) 
This page has 44 external Javascript scripts. Try combining them into one. 
This page has 18 external stylesheets. Try combining them into one. 
This page has 16 external background images. Try combiaing them with CSS sprites- 


A Avoid empty sre or href 
F Add Expires headers 


D Compress components with grip Decreasing the number of components on a page reduces the number of HTTP requests required to render the page, resulting in faster page loads. 


- Some ways to reduce the number of components include: combine files, combine multiple scripts imo ont script, combine multiple CSS fies into one 
B PutCSS ac mop style sheet, and use CSS Sprites and image maps. 
Put JavaScript at bottom 
B put} t at botte am 
A Avoid CSS expressions 











F Reduce DNS lookups 





11-83: YSLow 显示 了 需要 处 理 的 特定 性 能 区 域 的 评级 


其 他 工具 还 有 WebPagetest (http//www.webpagetestorg) 和 Pingdom Website Speed Test 
(http://tools.pingdom.com/fpt/) 。 


11.5 清理 代码 


改进 网 站 性 能 首先 要 做 的 就 是 清理 代码 ， 使 之 占用 的 空间 更 少 。 


11.5.1 使 用 简单 直接 的 代码 


编写 代码 应 尽 可 能 简单 直接 似乎 是 显而易见 的 ， 但 请 尽 你 所 能 。 


如 果 有 其 他 办 法 就 不 要 只 是 为 了 将 样式 应 用 于 某 个 元 素 就 为 其 添 加 一 个 class 或 id 属性 。 
例如 ， 下 面 这 么 做 是 不 必要 的 : 




















<header> 

«ul id="navigation"> 
</ul> 

</header> 








如 果 «header» 中 只 有 一 个 «ul» 元 素 ， 就 不 需要 为 其 设置 id 属性 ， 可 以 直接 这 样 应 用 样式 : 


header ul ( ... ) 
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这 种 方式 显然 易 见 ， 但 在 编码 过 程 中 往往 不 经 意 间 就 会 为 元 素 添 加 额外 的 class Hids E 
到 后 来 回顾 和 查看 代码 时 ， 你 才 可 能 意识 到 它们 是 多 余 的 。 


利用 层 县 来 避免 重复 的 CSS。 例 如 ， 如 果 网 站 中 的 绝 大 多 数 文 本 使 用 同一 字体 ， 应 将 
font-family 样式 应 用 于 < body > 元素， 而 不 是 分 别 应 用 于 <p>, < li > 等 元 素 。 然 
后 再 对 例外 的 元 素 追 加 特定 的 CSS 样式 。 
不 要 忘记 回顾 并 清理 你 的 样式 表 ， 因 为 可 能 有 的 样式 已 经 失去 作用 (针对 的 元 素 不 存在 了 )。 


虽然 在 写 代 码 的 时 候 最 好 做 到 简单 直接 ， 但 有 时 很 难 预见 什么 会 变 得 必要 或 不 必要 ， 所 以 
要 确保 在 最 后 对 代码 进行 回顾 来 找 出 可 以 去 掉 的 代码 片段 。 












































11.5.2 ”缩小 
我 们 在 编写 代码 时 会 添加 很 多 的 空白 ， 因 为 这 能 使 代码 更 容易 阅读 ， 但 是 浏览 器 并 不 需要 
这 些 额 外 的 空白 (空格 、 换 行 和 缩 进 字符 )。 


缩小 文件 就 是 去 除 文 件 中 这 些 不 必要 字符 的 过 程 。 例 如 ， 像 下 面 的 代码 : 























pl 
font-family: Georgia, serif; 
font-size: 1.1em; 


Ji i 
font-family: Helvetica, sans-serif; 
font-size: 1.2em; 


对 浏览 器 来 说 只 需要 这 样 即 可 : 


p{font-family:Georgia, serif;font-size:1.1lem;}li{fontfamily: 
Helvetica,sans-serif;font-size:1.2em;} 





当然 ， 在 编写 CSS 代码 时 像 这 样 不 用 空白 字符 是 难以 阅读 和 维护 的 ， 并 且 在 一 个 文档 中 不 
能 简单 地 搜索 和 替换 掉 所 有 的 空格 和 换行 符 ， 它 们 中 的 一 些 是 必 不 可 少 的 比如， 如 果 把 
nav li 中 的 空格 去 掉 变 成 nav1i， 这 就 会 导致 原本 的 样式 不 起 作用 )。 
































在 上 述 例子 中 ， 我 们 能 够 去 除 10 个 空格 符 ，2 个 制 表 符 和 7 个 换行 符 一 一 将 近 1596 的 字符 ! 
( 











因此 ， 我 们 可 以 在 上 传 到 网 站 服务 器 之 前 ， 再 将 CSS、JavaScript 和 HTML 文件 用 “缩小 
工具 ”缩小 ， 同 时 还 可 像 去 除 空白 字符 那样 去 除 掉 注释 (对 浏览 器 没 必 要 )。 





有 以 下 几 种 方法 可 以 实现 。 


首先 ， 对 于 非常 小 的 不 常 编 辑 的 网 站 ， 可 以 在 上 传 到 网 站 服务 器 之 前 单独 缩小 每 个 文 
件 。 如 果 是 一 次 缩小 一 个 文件 ， 有 几 个 网 站 可 通过 简单 的 形式 来 执行 此 操作 ， 比 如 CSS 
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Minifier (http://cssminifier.com) 或 YUI Compressor (http://refresh-sf.com/yui/) ， 或 在 网 上 
搜索 “CSS minifier” 或 “JavaScript minifier”。 但 对 于 大 多 数 网 站 ,手工 缩小 文件 要 做 太 多 
额外 的 工作 (不止 一 个 文件 )。 


如 果 网 站 只 有 一 个 工作 人 员 ， 那 也 简单 ， 假 如 所 有 的 文件 都 保存 在 自己 的 电脑 上 ， 可 以 使 
用 像 LiveReload (http://livereload.com) 或 Mixture (http://mixture.io) 这 样 的 预 处 理 器 应 用 
程序 在 上 传 文件 到 服务 器 之 前 缩小 它们 ， 而 在 自己 的 电脑 上 总 是 可 以 编辑 带 有 空白 字符 和 
注释 的 原始 文件 。 


如 果 是 与 他 人 共用 这 些 文件 ， 要 稍微 麻烦 些 ， 因 为 每 个 人 都 必须 使 用 相同 的 原始 文件 来 工 
作 ， 而 不 是 从 服务 器 下 载 处 理 过 的 最 新 版 本 的 文件 。 


~x 


















































通过 使 用 像 Minify 这 样 的 工具 〈 用 PHP 编写 )， 你 可 以 设置 在 运行 时 服务 器 自动 缩小 文 
件 ， 但 额外 的 处 理 时 间 往 往 抵 消 了 发 送 更 小 文件 所 带 来 的 好 处 ， 所 以 这 种 方法 并 不 推荐 。 














11.6 ”将 HTTP 请 求 减 至 最 少 
每 当 浏览 器 请 求 服务 器 提供 一 个 文件 时 都 会 产生 一 个 HTTP 请 求 。 


每 一 个 文件 ， 比 如 图 像 、 样 式 表 或 网 络 字体 ， 都 需要 一 个 单独 的 HTTP 请 求 。 每 一 个 文件 
从 浏览 器 到 服务 器 再 返回 这 样 一 个 “往返 ”的 请 求 /响应 过 程 在 宽带 上 可 能 只 需要 零点 几 
秒 的 时 间 ， 但 在 移动 网 络 上 则 可 能 需要 整整 一 秒 的 时 间 。 






































提高 网 站 性 能 的 一 个 最 有 效 方法 是 将 对 服务 器 的 HTTP 请 求 数量 减 至 最 少 。 可 以 通过 合并 
CSS, JavaScript 或 图 片 文件 来 实现 此 目标 。 

还 需要 确保 网 站 中 嵌入 的 第 三 方 代码 (比如 社交 媒体 微 件 、 广 告 或 者 统计 分 析 脚 本 ) 不 会 
请 求 大量 的 文件 。 


11.6.1 串联 
减少 HTTP 请 求 的 一 个 简易 方法 是 通过 串联 (concatenation) 合并 CSS 和 JavaScript 文件 ， 
从 而 减少 所 调用 的 CSS 和 JavaScript 文件 的 数量 。 

















虽然 对 于 开发 人 员 来 说 ， 根 据 用 途 的 不 同 将 代码 分 拆 到 单独 的 文件 中 可 能 更 方便 ， 但 由 于 
每 个 文件 都 需要 一 个 单独 的 HTTP 请 求 ， 这 将 延长 页 面 的 加 载 时 间 。 


如 果 出 于 开发 方便 的 目的 有 多 个 分 拆 的 文件 ， 那 么 可 在 上 传 文件 至 服务 器 之 前 再 将 多 个 
文件 组 合成 一 个 或 两 个 文件 。 许 多 用 来 缩小 文件 的 应 用 程序 也 可 以 用 来 串联 文件 ， 比 如 
YUI Compressor (http://yui.github.io/yuicompressor/) 或 Minify (https://code.google.com/p/ 
minify/)。 也 可 以 使 用 QuickConcat (https://github.com/filamentgroup/quickconcat)， 它 是 一 






































个 用 PHP 编写 的 运行 于 服务 器 端的 工具 。 

显而易见 ， 某 些 文件 是 不 能 被 合并 的 ， 比 如 ， 如 果 在 样式 表 链 接 中 使 用 媒体 查询 对 不 同 的 
屏幕 尺寸 指定 了 不 同 的 样式 表 ， 或 者 是 某 些 仅 用 在 网 站 部 分 页 面 上 的 样式 表 。 

此 外 ， 也 很 容易 通过 合并 代码 到 几 个 文件 而 不 是 分 散在 一 堆 文 件 中 来 单纯 减少 样式 表 的 数 
目 。 对 于 合并 后 的 样式 表 你 可 以 通过 注释 分 隔 各 部 分 的 样式 以 便于 引用 ， 同 时 使 用 缩小 工 
具有 删除 线 上 版 本 样式 表 中 的 注释 。 






































不 过 ,不 要 走 极端 。 浏 览 器 具有 一 次 同时 并 行 下 载 几 个 文件 的 能 力 ， 所 以 有 三 两 个 CSS X 
件 可 能 要 好 过 虽 只 有 一 个 CSS 文件 但 文件 却 非 常 长 这 种 情况 。 





11.6.2 ŞI REB 
FE fap M tbi TRAMAS RE ECEYS, XX nIBEBLARHA AGNI. ER, Jo ERa 
析 脚 本 。 

主要 的 问题 是 ， 在 页 面 加 载 过 程 期 间 ， 每 一 个 额外 的 域名 都 会 增加 额外 的 DNS 轮 询 。 如 
果 所 有 的 内 容 都 是 来 自 同一 个 域名 则 可 避免 此 问题 。 

第 二 个 问题 是 ， 你 提供 的 内 容 依赖 于 别人 的 网 站 。 如 果 别 人 的 网 站 变 慢 或 不 可 用 ， 你 的 网 
站 在 试图 加 载 资 源 时 就 会 因此 受阻 而 无 法 继续 或 被 卡 住 。 


最 常见 的 罪魁 祸首 之 一 是 社交 媒体 微 f 你 肯定 见 过 ， 就 是 网 页 中 的 那些 Facebook, 
Twitter 或 其 他 网 站 的 “Share This" (DÆ) mae bh. 









































这 些 往往 是 使 用 第 三 方 软件 在 页 面 中 实现 的 ， 人 允许 你 跟踪 用 户 的 行为 ， 问 题 在 于 它们 通常 
由 大 量 代码 组 成 。 


图 11-4 展示 了 《华盛顿 邮 报 》 网 站 上 的 社交 媒体 微 件 。 











图 11-4:《 华 盛 顿 邮 报 》 网 站 上 的 社交 媒体 微 件 
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它 看 上 去 够 简单 的 ， 但 部 分 问题 在 于 底部 的 “更 多 ”(More) 链接 ， 其 包含 其 他 社交 媒体 
网 站 的 链接 。 这 些 底层 代码 并 非 最 优 一 一 每 个 选项 由 一 个 «div», <li> 和 <span> 元 素 
组 成 ， 连 带 数 个 CSS 类 和 一 个 onclick 事件 。 


























更 不 用 说 所 有 的 图 标 了 ， 即 使 是 合并 在 一 个 拼合 图 片 中 ， 它 们 仍然 有 22 KB X. 
你 应 考虑 是 否 真 的 需要 这 么 一 个 复杂 的 微 件 ， 即 使 没有 它 用 户 仍 然 可 以 分 享 你 的 内 容 。 
Oliver Reichenstein 在 Information Architects Inc 网 站 上 发 表 了 一 篇 伟大 的 博客 文章 “Sweep 


the Sleaze” (扫除 劣 品 )， 细 数 了 社交 媒体 微 件 并 不 能 增加 网 站 价值 的 原因 (http://ia.net/ 
blog/sweepthe-sleaze/) 。 























但 是 如 果 你 确实 需要 保留 这 样 的 通常 由 JavaScript 生成 的 微 件 ， 请 仔细 考虑 下 是 否 可 以 推 
迟到 页 面 泻 染 完毕 之 后 再 加 载 它 们 〈 在 本 章 随后 的 部 分 ， 我 们 将 进一步 讨论 推迟 JavaScript 
脚本 执行 的 话题 )。 当 然 推迟 加 载 后 ， 它 会 延迟 一 会 才 在 页 面 上 弹出 来 ， 但 这 并 没关系 ， 
因为 通常 用 户 是 在 已 阅读 了 页 面 之 后 才 会 决定 是 否 要 将 其 分 享 给 他 人 。 









































[小 贴 士 ] 

如 果 你 真 的 需要 社交 媒体 微 件 ,可 以 研究 下 Filament Group 公司 的 SocialCount (http:/ 
filamentgroup.com/lab/socialcount.html )， 它 是 一 个 jQuery 插件 ， 人 允许 你 以 一 种 不 会 严重 影响 
性 能 的 方式 添加 社交 媒体 微 件 ， 插 件 包含 的 JavaScript 和 CSS 加 起 来 只 有 3 KB, 


11.6.3 图像 拼合 
我 们 已 经 在 6.1.4 市 详细 讨论 过 图 像 拼 合 ， 它 是 一 种 通过 将 儿 个 小 图 像 组 合成 一 个 大 图 像 
进而 减少 要 下 载 的 文件 数目 的 方法 。 


当 图 像 彼 此 相关 时 这 种 方法 是 最 有 效 的 比如， 一 组 显示 在 一 起 的 图 标 )。 


11.7 服务 器 设置 


接 下 来 我 们 将 学 习 必 要 的 服务 器 设置 。 如 果 你 是 一 个 设计 师 ， 它 们 可 能 不 在 你 的 直接 掌控 
之 下 ， 而 那些 有 控制 权 的 人 可 能 又 认识 不 到 这 些 设置 对 网 站 性 能 的 重要 性 。 但 这 并 不 意味 
着 你 就 可 以 无 所 作为 ， 找 到 那个 有 控制 权 的 人 并 促使 其 合理 调整 设置 是 绝对 值得 的 。 


11.7.1 避免 重 定向 

HTTP 重 定向 发 生 在 用 户 所 加 载 页 面 的 网 址 不 是 页 面 的 实际 网 址 之 时 ， 浏 览 器 被 重 定向 到 
正确 的 网 址 。 这 需要 在 网 站 服务 器 上 进行 设置 ， 比 如 通过 设置 Apache 的 .htaccess 文件 ， 
或 者 通过 设置 内 容 管理 系统 (CMS) 中 的 功能 选项 。 

































































最 熟悉 的 重 定向 是 从 备用 域名 访问 一 个 网 站 。 例 如 ， 如 果 在 浏览 器 中 输入 www. 
newyorktimes.com， 页 面 加 载 后 ， 你 会 看 到 在 地 址 栏 中 实际 的 网 址 是 www.nytimes.com, 








当 页 面 的 网 址 发 生 了 变化 而 你 希望 确保 访问 旧 网 址 的 用 户 仍 能 获得 正确 的 页 面 ， 或 者 你 想 
将 用 户 导向 网 站 的 一 个 特定 子 域名 。 这 也 是 我 们 经 常 使 用 重 定向 的 两 种 情形 。 

在 有 移动 、 桌 面 两 个 版 本 的 网 站 上 ， 通 常会 基于 用 户 使 用 的 设备 将 用 户 重 定向 至 正确 版 本 
的 页 面 。 例 如 ， 从 www.example.com/pagename 重 定向 至 m.example.com/pagename。( 对 于 
响应 式 设 计 ， 你 不 必 担 心 这 种 类 型 的 重 定向 。) 


很 明显 ， 有 很 多 场合 需要 使 用 HITP 重 定向 。 但 请 记 住 ， 重 定向 是 有 性 能 损失 的 。 


尤其 要 确保 所 有 网 站 使 用 的 文件 ， 包 括 图 片 或 样式 表 ， 使 用 了 正确 的 网 址 调用 。 比 如 ,在 
链接 同一 个 域名 下 的 文件 时 应 使 用 相对 链接 (/images/file.jpg) 而 不 是 绝对 链接 (http:// 


www.example.com/images/file.jpg ) o 



























































如 果 网 站 中 页 面 的 地 址 在 重新 设计 网 站 后 发 生 了 变化 ， 只 要 有 可 能 就 应 该 在 网 站 上 启用 实 
际 的 链接 ， 而 不 是 使 用 重 定向 将 用 户 导向 正确 的 位 置 。 


更 应 避免 多 个 重 定向 连 在 一 串 这 种 情况 。 


11.7.2 文件 压缩 


压缩 可 用 于 减 小 所 有 要 发 送 文件 的 大 小 。 




















大 多 数 网 站 服务 器 可 以 在 发 送 文件 给 用 户 电 脑 之 前 使 用 gzip 格式 压缩 文件 。 当 浏览 器 请 求 
一 个 页 面 时 ， 会 告诉 服务 器 它 是 否 能 处 理 压 缩 文件 。 服 务 器 将 向 能 够 处 理 压 缩 文 件 的 浏览 
器 发 送 压缩 过 的 文件 。 





























可 以 使 用 GIDZIPTest (http://www.gidnetwork.com/tools/gzip-test.php) 来 检测 一 个 网 页 是 
否 是 压缩 过 的 ， 如 有 果 是 的 话 ， 则 会 给 出 压缩 前 后 文件 大 小 的 比较 。 例 如 ， 测 试 《华盛顿 邮 
报 》 网 站 的 首页 ， 能 看 到 它 是 用 gzip 格式 压缩 过 的 ， 市 省 了 69.5% 的 空间 (300 KB 压缩 
成 92 KB), 




















可 以 在 网 站 服务 器 设置 中 打开 压缩 功能 。 例 如 ，Apache 站 点 使 用 mod_def1late 模块 提供 
压缩 功能 (http://httpd.apache.org/docs/current/mod/mod. deflate.html) 。 你 的 虚拟 主机 提供 商 
可 能 会 为 此 在 控制 面板 上 提供 一 个 设置 选项 ， 并 且 它 可 能 是 默认 启用 的 。 如 果 是 在 一 个 共 
享 主机 上 ， 则 可 能 无 法 打开 和 关闭 压缩 功能 。 


























我 们 应 该 对 所 有 的 HTML, CSS 和 JavaScript 文件 都 进行 压缩 。 
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11.7.3 浏览 器 缓存 

浏览 器 在 显示 一 个 网 页 时 会 下 载 大 量 文 件 ， 这 些 文件 将 在 用 户 浏 览 网 站 其 他 页 面 时 被 重 
用 ， 其 中 包含 了 样式 表 、 图 片 、JavaScript 文件 和 字体 文件 。 
浏览 器 缓存 意味 着 浏览 器 可 以 在 指定 的 时 间 段 内 将 这 些 文件 临时 存储 在 用 户 的 电脑 上 ， 这 
样 一 来 ， 当 用 户 访问 网 站 的 其 他 页 面 时 ， 或 者 如 果 她 之 后 某 天 又 回来 访问 网 站 时 ， 浏 览 器 
不 需要 重新 加 载 这 些 文件 。 






































过 减少 需要 下 载 的 数据 量 不 仅 可 以 减少 页 面 的 加 载 时 间 ， 还 可 以 减少 下 载 页 面 所 需 的 带 
， 这 对 于 带宽 有 限 的 手机 合约 计划 用 户 或 按 流量 付费 的 手机 用 户 都 是 有 益 的 。 














EX [E 





1 览 器 缓存 并 不 必然 是 自动 产生 的 。 要 去 缓存 什么 并 不 由 浏览 器 决定 ， 相 反 ， 是 由 网 站 服 
务 器 设置 的 一 组 规则 来 告诉 浏览 占 是 否 以 及 何 时 去 缓存 某 一 文件 。 


SE 





如 何 设 置 浏 览 器 缓存 取决 于 所 使 用 的 网 站 服务 器 软件 。 例 如 ， 在 Apache 中 ， 应 编 
辑 .htaccess 文件 。 


你 的 主机 可 能 默认 打开 了 浏览 器 缓存 。 如 果 不 确定 的 话 ， 可 以 使 用 谷歌 的 PageSpeed 
Insights (http://developers.google.com/speed/pagespeed/insights/) 来 检查 一 下 。 


我 们 可 以 为 不 同类 型 的 文件 设置 不 同 的 过 期 时 间 。 例 如 ， 可 以 指定 jpg 文件 在 一 个 月 后 过 
期 。 之 后 浏览 器 会 缓存 所 有 的 .jpg 文件 ， 而 不 会 每 次 都 尝试 重新 加 载 它们 ， 直 到 文件 在 首 
次 下 载 一 个 月 后 过 期 。 


文件 的 缓存 时 间 取决 于 文件 的 类 型 以 及 文件 的 更 新 频率 。 例 如 ， 你 可 能 不 经 常 改变 网 站 上 
的 图 片 文件 ， 因 此 允许 长 时 间 缓 存 它 们 是 安全 的 。 如 果 需 要 改变 一 个 图 片 文件 ， 比 如 更 换 
新 版 网 站 标志 ， 可 以 简单 地 给 替换 图 片 一 个 不 同 的 文件 名 ， 那 么 浏览 器 将 被 迫 下 载 它 。 


如 果 更 改 样式 表 非 常 频繁 ， 你 可 能 需要 设置 它们 的 过 期 时 间 为 一 天 。 这 对 用 户 的 好 处 还 是 
他 们 在 浏览 网 站 时 不 必 每 次 都 重新 下 载 这 些 文件 ， 但 对 于 你 所 做 出 的 任何 样式 变化 他 们 将 
在 24 小 时 之 内 才能 看 到 。 


请 记 住 ， 浏 览 器 缓存 空间 可 能 是 有 限 的 ， 所 以 如 果 一 个 用 户 访问 大 量 的 网 站 ， 那 么 并 不 是 
所 有 上 有 具有 长 过 期 时 间 的 资源 都 能 实际 存储 那么 长 的 时 间 。 这 在 老式 的 移动 设备 上 尤其 是 个 
问题 ， 它 们 拥有 的 缓存 空间 非常 有 限 。 但 即使 只 有 极 小 的 缓存 空间 ， 在 用 户 此 次 访问 网 站 
期 间 ， 文 件 将 保留 在 缓存 中 ， 除 了 一 开始 访问 第 一 个 页 面 外 ， 其 他 页 面 的 加 载 时 间 都 会 因 
此 而 变 短 。 
























































一 般 来 说 ， 静 态 资 源 应 该 至 少 设置 一 周 的 过 期 时 间 ， 可 能 的 话 还 可 以 更 长 。 缓 存 时 间 最 长 
允许 设置 为 一 年 。 只 有 那些 一 天 改变 多 次 的 资源 ， 如 新 闻 网 站 的 首页 ， 应 该 设置 成 根本 不 
缓存 。 对 于 经 常 改变 的 资源 即使 只 允许 浏览 器 缓存 儿 个 小 时 也 能 减少 网 站 的 加 载 时 间 。 








11.8 JavaScript 


如 果 不 熟悉 JavaScript， 你 需要 了 解 一 下 它 的 工作 方式 。 下 面 的 11.8.1 节 和 11.8.2 节 提 供 
了 一 点 儿 背 景 知 识 。 如 果 你 已 经 熟悉 JavaScript， 完 全 可 以 跳 到 11.8.3 节 。 














11.8.1 JavaScript 做 什么 
你 大 概 已 经 知道 了 网 站 是 分 层 构 建 的 ， 第 一 层 是 用 于 构建 内 容 的 HIML， 第 二 层 是 用 于 呈 
现 内 容 的 CSS。 








网 站 的 第 三 层 是 JavaScript， 它 用 于 交互 或 行为 。 这 是 一 个 可 选 的 层 ， 如 果 只 是 要 求 创建 
一 个 供用 户 阅 读 和 观看 ， 只 有 具 基本 交互 性 的 网 站 ， 你 可 能 根本 不 需要 用 JavaScript 就 能 创 
建 出 一 个 好 的 样品 来 。 

















JavaScript 常用 于 验证 表单 字段 ， 更 新 页 面部 分 内 容 的 同事 不 必 重 新 加 载 整个 页 面 ， 以 及 
页 面 元 素 的 动画 效果 实现 。 

















JavaScript 是 一 种 客户 端 编程 语言 。 这 意味 着 所 有 的 JavaScript 代码 是 完全 由 浏览 器 (客户 
Um) 加 载 并 执行 的 。 这 与 PHP 之 类 的 服务 器 端 语言 形成 对 照 ， 后 者 在 服务 器 端 完成 对 页 面 
的 处 理 后 再 将 页 面 发 送 给 浏览 器 。 




















11.8.2 ”JavaScript 的 工作 方式 


JavaScript 可 以 包含 在 HTML 页 面 中 ， 或 者 单独 保存 为 扩展 名 为 js 的 文件 (通过 <head> 
a% <body> 中 的 < script > 元素 链接 ) 。 




















浏览 器 加 载 HTML. 文档 之 后 ， 它 从 «head» 第 一 个 元 素 开始 ， 顺 序 加 载 、 呈 现 、 执 行 它 所 
遇 到 的 每 一 个 元 素 。 所 以 ， 假 如 <head> 中 的 第 一 个 元 素 是 外 部 CSS 文件 的 链接 ， 它 将 先 
加 载 这 个 CSS 文件 然后 才 移动 至 下 一 个 元 素 。 








当 浏 览 器 遇 到 JavaScript 时 ， 不 管 是 链接 脚本 还 是 内 联 脚本 ， 它 都 会 加 载 并 执行 完 脚 本 之 
后 才 移 至 下 一 个 元 素 。 

所 以 ， 如 果 你 在 <head> 中 包含 有 脚本 不 管 是 采用 内 联 形式 还 是 通过 链接 外 部 
JavaScript 脚本 文件 ， 浏 览 器 会 在 处 理 «body» 元 素 ， 开 始 向 屏幕 显示 内 容 之 前 先 执行 这 些 
脚本 ! 这 意味 着 在 脚本 运行 期 间 ， 用 户 将 盯 着 一 个 空白 的 屏幕 。 



































不 过 ， 这 并 不 意味 着 在 当前 JavaScript 执行 时 ， 任 何 效果 都 能 够 实际 生成 。 














大 多 数 JavaScript 是 由 一 个 事件 触发 的 。 例 如 ， 你 可 能 见 过 onclick 事件 ， 其 意味 着 在 用 
户 点 击 指定 的 元 素 之 前 ， 不 管 JavaScript 要 干什么 ， 都 不 会 发 生 。onload 事件 则 意味 着 仅 
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在 页 面 加 载 完 成 之 后 事件 中 JavaScript 才 开始 执行 。 另 一 个 例子 是 在 用 户 点 击 提交 按钮 时 
执行 表单 字段 验证 的 脚本 。 











网 页 中 的 很 多 JavaScript 脚本 只 是 为 了 之 后 能 通过 类 似 onclick 这 样 的 事件 引发 将 执行 的 
操作 而 做 准备 的 。 

















不 幸 的 是 ， 因 为 取决 于 你 在 页 面 的 什么 位 置 加 入 或 链接 JavaScript 脚本 ， 这 些 脚 本 可 能 会 
导致 很 多 问题 ， 可 能 会 阻塞 页 面 的 演 染 ， 大 大 减 慢 渲染 的 速度 。 




















此 外 ， 浏 览 器 的 工作 方式 意味 着 浏览 器 不 能 同时 渲染 页 面 和 执行 脚本 。 因 此 尽管 从 某 种 意 
义 上 说 ， 浏 览 器 一 次 不 只 是 能 做 一 件 事 情 (这 个 解释 起 来 很 复杂 )， 但 如 有 果 浏 览 器 过 到 一 
个 脚本 ， 在 它 执 行 脚本 期 间 它 必须 停 下 所 有 的 泻 染 工作 。 





11.8.3 阻塞 式 JavaScript 


阻塞 页 面 加 载 的 JavaScript 有 时 称 为 阻塞 式 JavaScript, 














因为 浏览 器 在 遇 到 脚本 时 必须 运行 它 ， 浏 览 器 可 能 在 谊 当 HTML 和 CSS 之 前 被 迫 运 行 所 
有 JavaScript， 即 使 它 在 页 面 完 成 加 载 之 前 ， 并 不 需要 这 其 中 的 大 多 数 JavaScript。 









































如 果 不 确 定 你 的 JavaScript 是 否 会 阻塞 页 面 的 浑 染 ， 试 试 谷歌 PageSpeed Insights (http:// 
developers.google.com/speed/pagespeed/insights/) ， 它 将 告 之 网 站 是 否 存在 阻塞 元 素 。 如 图 
11-5 所 示 。 








EEJ Mobile E Desktop 


Speed 


lil Should Fix: 
Eliminate render-blocking JavaScript and CSS in above-the-fold 
content 


Your page has 2 blocking script resources and 1 blocking CSS resources. This 
causes a delay in rendering your page. 


None of the above-the-fold content on your page could be rendered without wailing 
for the following resources to load. Try to defer or asynchronously load blocking 
resources, or inline the critical portions of those resources directly in the HTML 


Remove rendoer-blocking JavaSoript: 


http/www.cbc.ca/m/g/shell/touch/js/raw/basics.js 


http://www.cbc.calm/g/shell/touch/ja/rawícore ja Lg 
Add the COC Mobile van te your Phons; 
Optimize CSS Delivery of the following: Top EÈ eis “Add to Home 


http/www.cbc.ca/m/touch/css/intro.css 


^ Hide details 


E Consider Fixing: 





Leverage browser caching 
* Show how to fix 


11-5; PageSpeed Insights 会 给 出 网 页 的 JavaScript 是 否 阻 塞 了 页 面 的 泻 染 
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要 防止 JavaScript 阻塞 页 面 的 泻 染 ， 则 应 该 确保 在 浏览 器 加 载 和 谊 娄 页 面 时 ， 只 加 载 必 要 
的 JavaScript 来 显示 页 面 上 用 户 首先 会 看 到 的 内 容 。 所 有 其 他 的 JavaScript 应 该 在 页 面 泻 染 
完成 之 后 再 加 载 。 

1. 优先 加 载 首 屏 所 需 JavaScript 

如 果 JavaScript 对 于 显示 首 屏 (above the fold， 一 腿 就 能 看 到 不 用 向 下 滚动 屏幕 ) 页 面 内 容 
是 必需 的 ， 那 该 脚本 应 该 在 加 载 页 面 时 即 被 加 载 。 


其 他 的 JavaScript 可 以 推迟 加 载 (我 也 将 这 个 问题 推 后 到 下 一 市 讲述 )。 这 将 包括 所 有 只 在 
页 面 加 载 完 成 之 后 才 需 要 的 脚本 (比如 onclick 事件 处 理 器 ) 或 应 用 于 页 面 很 靠 后 内 容 
的 脚本 。 








































































































仔细 考虑 每 个 脚本 是 否 真 的 立即 需要 ， 以 及 是 否 可 以 推迟 执行 。 


对 于 响应 式 网 站 ， 你 可 能 会 用 到 JavaScript 腻子 脚本 或 特性 测试 来 使 网 站 能 在 老式 浏览 器 
上 工作 〈 即 确保 媒体 查询 能 在 老 版 本 IE 上 工作 )。 这 些 脚本 需要 放 在 <head> 元 素 中 ， 医 
为 它们 对 于 在 那些 老式 浏览 器 中 泻 染 页 面 是 必需 的 。 


2. 内 联 脚 本 

如 果 你 有 小 段 的 脚本 ， 那 么 可 以 以 碰 入 形式 将 它们 包含 在 HTML 中 ， 这 样 浏 览 器 就 不 必 加 
载 额 外 的 文件 了 。 

潜在 的 问题 是 缓存 的 限制 。 如 果 你 包含 了 内 联 脚本 ， 每 次 页 面 加 载 时 它 也 随 页 面 一 起 加 


载 。 所 以 这 对 于 大 型 脚本 或 者 网 站 中 所 有 页 面 都 需要 的 脚本 可 能 不 是 一 个 好 主意 ， 但 如 果 
网 站 的 首页 有 些 特殊 的 内 容 需 要 JavaScript， 使 用 内 联 脚本 可 能 是 个 不 错 选 择 : 












































«head» 
«script type-"text/javascript'"» 


EE 
x rens 
如 果 网 站 只 用 到 一 点 点 JavaSeript， 通 常 最 好 以 内 联 方式 包含 它 ， 而 不 是 添加 一 个 需要 另 
外 下 载 的 文件 。 


3. 延迟 加 载 
对 于 页 面 晚 些 时 候 才 需要 的 其 他 脚本 ， 你 可 以 通过 把 它们 移 到 页 面 尾 部 </body> 标记 之 
前 ， 将 其 延迟 至 页 面 演 染 完成 之 后 才 加 载 。 























这 些 脚 本 将 不 再 阻塞 页 面 的 泻 染 。 只 有 页 面 上 的 最 后 一 个 HTML 元 素 演 染 完 之 后 这 些 脚 本 
才 开 始 加 载 并 执行 。 
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4. 推迟 执行 

有 点 环 手 的 是 使 用 了 defer 属性 的 «script» 元 素 。 如 果 你 在 <head> 中 使 用 这 样 一 个 
JavaScript 链接 ， 训 览 器 在 首次 遇 到 该 元 素 时 仍 会 加 载 链接 的 脚本 文件 ， 但 会 推 退 文件 的 
执行 直至 网 页 演 染 完毕 之 后 。 




















该 属性 是 一 个 布尔 属性 ， 这 意味 着 如 果 defer 属性 存在 则 表明 允许 推迟 执行 ， 如 采访 属性 
不 存在 ， 则 表明 不 允许 推迟 执行 : 











«Script type-"text/javascript" defer» 
</script> 


defer 属性 对 所 有 当前 的 主流 浏览 器 都 有 效 ， 除 了 Opera Mini 浏览 器 。 查 看 文章 “Can I 
use defer attribute for external scripts ? ”(http://caniuse.com/script-defer) 以 了 解 更 多 细节 。 





注意 ， 这 只 对 外 部 脚本 (到 JavaScript 文件 的 链接 ) 有 效 ， 并 不 适用 于 内 联 脚本 。 





一 般 来 说 ， 最 好 就 是 将 JavaScript 移 至 HTML 文档 的 末尾 。 如 果 不 是 计划 在 页 面 演 染 之 前 
执行 JavaScript， 那 么 在 页 面 泻 染 之 前 加 载 它 就 毫 无 意义 。 


5. 异步 加 载 
HTMLS 中 新 增加 了 一 个 async ( 即 asynchronous， 意 为 “异步 ”) 属性 。 














如 果 «script» 元 素 包 含有 该 属性 ， 当 浏览 器 在 «head» 或 «body» 中 首次 遇 到 它 时 ， 浏 
览 器 会 一 边 继 续 解析 页 面 一 边 开 始 加 载 JavaScript 文件 。 这 与 以 往 的 不 同 之 处 在 于 ， 在 闵 
览 器 加 载 并 执行 那个 特定 的 脚本 时 ， 它 不 会 停止 其 他 的 加 载 和 泻 染 工作 。 


相反 ， 它 会 在 加 载 其 他 资源 (如 果 有 的 话 ) 的 同时 加 载 脚 本 ， 并 在 脚本 一 旦 可 用 时 ( 即 当 
脚本 完成 加 载 后 ) 执行 它 。 


注意 ， 这 个 属性 只 对 外 部 脚本 (到 JavaScript 文件 的 链接 ) 有 效 ， 并 不 适用 于 内 联 脚本 。 


该 属性 也 是 一 个 布尔 属性 ， 因 此 如 果 async 属性 存在 则 表明 允许 异步 加 载 ， 如 果 该 属性 不 
存在 ， 则 表明 不 允许 异步 加 载 : 












































«Script async src-"example.js"» 
«/acript» 
这 个 属性 被 除 Opera Mini 之 外 的 所 有 最 新 版 本 的 浏览 器 所 支持 。 
通常 ， 如 果 一 个 脚本 是 泻 染 页 面 所 必需 的 ， 应 把 它 放 在 «head» 元 素 中 ， 并 考虑 包含 


async 属性 ， 只 有 一 个 例外 : 如 果 有 多 个 脚本 需要 按 特定 的 顺序 (例如 一 个 依赖 于 另 一 
A) 来 执行 ， 则 不 要 包含 这 个 属性 。 每 个 包含 async 属性 的 脚本 只 要 加 载 完 成 就 会 被 执 




















行 ， 但 它们 完成 加 载 的 次 序 可 能 并 不 与 你 在 <head> 中 放置 它们 的 顺序 相同 ， 因 此 它们 可 
能 也 不 是 按 那个 顺序 来 执行 的 。 


当 你 从 第 三 方 来 源 加 载 JavaScript 文件 时 〈 比 如 当 你 有 上 艇 入 的 地 图 或 广告 类 的 内 容 时 )， 你 
可 能 特别 需要 使 用 异步 加 载 ， 这 样 ， 如 果 从 其 他 网 站 加 载 文件 时 遇 到 问题 ， 它 并 不 会 阻塞 
网 站 上 其 他 内 容 的 加 载 。 


6. 仅 加 载 页 面 必需 的 代码 
额外 一 点 ， 你 应 该 确保 在 每 个 页 面 中 只 加 载 必 要 的 JavaScript。 


f£ «head» 中 包含 所 有 网 站 要 用 到 的 脚本 文件 ， 这 一 做 法 仍然 非常 普遍 ， 即 使 某 些 文件 只 
是 用 在 首页 上 ， 或 只 是 用 在 站 点 的 部 分 页 面 (比如 电 商 页 面 ) 上 。 


尽管 文件 缓存 意味 着 脚本 文件 不 会 反复 加 载 ， 但 在 用 户 访问 网 站 时 ， 他 所 访问 的 第 一 个 页 
面相 对 而 言 会 慢 很 多 ， 因 为 需要 去 下 载 所 有 的 脚本 文件 。 


7. 用 HTMLCSS 代 替 JavaScript 
你 可 能 并 不 知道 ， 可 以 纯粹 用 HTMLS 和 CSS3 做 很 多 原本 你 习惯 于 用 JavaScript 来 实现 的 
事情 。 


例如 ， 如 果 表 单 包含 一 个 日 期 表单 字段 ， 以 前 需要 使 用 JavaScript 来 创建 一 个 小 的 弹出 日 历 
框 让 用 户 可 以 选择 日 期 。 在 HTMLS 中 ， 引 入 了 新 的 日 期 类 型 表单 字段 ， 它 会 基于 浏览 器 
的 默认 样式 自动 创建 一 个 日 历 ， 而 不 需要 任何 JavaScript (尽管 这 还 不 被 所 有 浏览 器 支持 ) 。 

















































































































你 也 可 以 使 用 CSS. 实现 当 鼠 标 悬 停 于 一 幅 图 片上 时 将 其 变 成 另 一 幅 图 片 的 动态 效果 。 





在 大 多 数 情况 下 ， 使 用 HTML x CSS 代替 JavaScript 将 有 助 于 提升 性 能 。 浏 览 器 不 必 加 载 
量 的 代码 (创建 和 样式 化 日 历 弹 出 框 的 代码 是 非常 复杂 的 )， 如 果 浏 览 器 已 经 支持 新 的 
日 期 型 表单 字段 ， 你 只 需 使 用 <input type="date"> 即 可 。 








不 过 ，HTML 和 CSS 并 不 总 是 一 个 更 好 的 选择 。 例 如 ， 你 可 以 使 用 纯 CSS 做 一 些 非常 复 
杂 的 动画 ， 但 有 时 用 JavaScript 实现 相同 的 效果 对 性 能 的 影响 会 更 小 。 你 最 好 对 它们 进行 
独 考 察 ， 从 中 挑选 出 最 佳 的 方法 。 





«nd 


为 了 用 JavaScript 实现 一 些 花 哨 的 效果 而 去 牺牲 性 能 根本 不 值得 。 记 住 ， 性 能 也 是 设计 的 


一 部 分 。 





11.8.4 JavaScript 
使 用 JavaScript 库 或 框架 是 使 网 站 膨胀 的 另 一 个 原因 。 


一 个 JavaScript 库 是 一 组 预先 写 好 的 JavaScript 代码 ， 便 于 人 们 编写 网 站 所 用 的 脚本 。 基 本 
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E, CUE EEN ERDE, MAR ERARDH JavaScript, MEYA 
编写 所 有 的 JavaScript 代码 。 





有 许多 不 同 的 JavaScript 库 ， 最 车 名 的 是 JQuery (http://jquery.com)。JavaScript 框架 类 似 
于 JavaScript 库 ， 只 是 具有 更 多 的 功能 。 











向 网 站 添加 JavaScript 库 所 带 来 的 问题 是 ， 你 可 能 只 会 用 到 它 的 一 小 部 分 功能 ， 却 被 迫 接 
受 库 中 所 有 你 并 不 需要 的 其 他 代码 。 

如 果 要 在 网 站 中 使 用 一 个 JavaScript 库 ， 查 看 下 你 是 否 真 的 需要 一 个 完整 的 库 。 现 在 可 以 
找到 很 多 微 库 或 微 框架 ， 它 们 要 小 得 多 (一般 不 超过 5 KB) 并 只 包含 执行 某 个 特定 任务 
的 代码 。 请 访问 Microjs (http://microjs.com) 网 站 ， 其 中 收集 了 一 系列 数 以 百 计 的 小 脚本 ， 
并 可 对 脚本 进行 精确 地 搜索 。 


当然 ， 你 也 可 以 自己 编写 JavaScript 脚本 ， 而 不 去 依赖 别人 预先 写 好 的 代码 。 






































11.9 CSS 


正如 前 面 提 到 的 ， 使 用 CSS 的 第 一 步 是 最 小 化 你 需要 的 CSS 样式 数量 ， 使 用 简单 直接 的 
代码 ， 并 且 避 免 重复 不 必要 的 样式 。 








CSS 也 可 能 阻塞 页 面 的 泻 染 。 浏 览 器 在 等 待 所 有 的 CSS 文件 加 载 完 毕 之 后 才 开始 泻 染 页 
面 。 因 为 它 需 要 根据 CSS 来 获知 每 个 元 素 在 何 处 以 及 用 怎样 的 方式 来 渲染 。 


使 用 «link» 而 不 是 @import 可 以 加 速 样 式 表 加 载 ， 前 者 使 得 浏览 器 可 在 同一 时 间 加 载 数 
个 样式 表 ， 后 者 则 使 样式 表 按 顺序 逐一 加 载 。 














你 可 做 的 另 一 件 事情 就 是 延迟 加 载 那些 不 是 初始 页 面 〈 首 屏 页 面 ) 所 必需 的 CSS， 将 它们 
移 至 页 面 尾 部 «/bodys 标记 之 前 ， 就 像 你 对 JavaScript 所 做 的 那样 。 









































如 果 有 很 多 仅 适 用 于 网 站 某 些 特定 部 分 的 样式 规则 ， 将 这 些 样 式 放 在 一 个 单独 的 样式 表 
中 ， 仅 在 需要 的 页 面 上 加 载 它们 。 




















CSS 框 架 

使 用 CSS 框架 会 导致 使 用 JavaSeript 库 类 似 的 问题 ， 最 终 会 有 很 多 实际 上 并 不 需要 的 代 
码 。 一 个 框架 涵盖 了 网 站 可 能 会 做 的 所 有 事情 ， 并 包括 所 有 的 实现 代码 。 因 此 ， 对 于 使 用 
它 的 大 多 数 网 站 实际 用 到 的 功能 而 言 ， 框 架 显示 过 于 复杂 。 




















如 果 你 使 用 一 个 类 似 Bootstrap 或 Foundation 这 样 的 框架 来 构建 你 的 网 站 ， 请 注意 这 个 
问题 o 























框架 中 的 CSS 通常 是 容易 理解 的 ， 因 此 你 应 该 能 够 梳理 和 排除 大 部 分 你 知道 自己 不 会 用 到 
的 CSS。 


例如 ， 如 果 网 站 不 包含 任何 数据 表格 ， 就 可 以 移 除 所 有 关于 表格 的 CSS 样式 。 当 然 ， 如 采 
以 后 又 要 在 网 站 中 使 用 表格 的 话 ， 总 是 可 以 将 这 些 CSS. 再 添加 回去 。 























虽然 这 么 做 会 多 花 点 时 间 ， 但 通过 梳理 和 移 除 不 会 在 网 站 中 使 用 到 的 CSS， 可 以 市 省 更 多 
的 代码 空间 。 





[ 提示 ] 

将 CSS 框架 中 所 有 未 使 用 的 CSS 移 到 一 个 名 为 unused.css 的 文件 ， 并 把 它 与 其 他 CSS 文件 
一 道 放 在 服务 器 上 ， 这 样 在 你 需要 时 ， 就 能 很 方便 地 将 移 除 的 代码 添加 回去 ， 不 用 去 管 这 个 
文件 有 多 大 ， 因 为 它 不 会 随 网 站 的 其 他 资源 一 起 被 下 载 。 





此 外 ， 确 保 你 没有 重复 编写 CSS 规则 。CSS 框架 几乎 为 所 有 的 元 素 都 设置 了 CSS 属性 值 。 
如 果 你 需要 改变 什么 ， 比 如 «his 的 字体 大 小 ， 不 要 简单 地 在 文件 末尾 添上 新 的 CSS。 相 
反 ， 应 在 框架 的 样式 表 中 找到 <h1> 并 替换 原来 的 值 。 在 文件 末尾 添加 一 个 单独 的 声明 不 
仅仅 是 增加 了 不 必要 的 代码 ， 也 可 能 给 后 来 试图 编辑 样式 表 的 开发 人 员 造 成 困惑 。 


最 后 ， 尽 管 CSS 框架 可 能 用 起 来 非常 方便 ， 比 如 当 你 需要 快速 搭建 起 一 个 网 站 ， 或 者 你 雇 
用 来 创建 网 站 的 员工 没有 丰富 的 开发 经 验 (比如 非 营 利 组 织 、 小 企业 或 者 业余 爱好 项 目 )， 
但 你 得 到 的 网 站 肯定 要 比 从 零 开始 完全 自主 编写 代码 所 创建 的 网 站 要 腔 肿 得 多 。 


11.10 托管 
将 网 站 托管 在 不 同 的 地 方 肯定 会 对 加 载 速度 造成 影响 。 


如 果 每 月 只 花 几 美元 托管 在 共享 主机 上 ， 网 站 肯定 要 比 你 花 大 价钱 购买 独立 服务 器 及 更 好 
的 数据 连接 要 慢 。 不 过 更 贵 并 不 意味 着 一 定 就 更 好 。 货 比 三 家 ， 并 将 各 家 主机 服务 商 的 客 
户 满 意 度 作为 参考 ， 表 做 出 选择 。 


另外 ， 如 果 托 管 方案 有 带宽 限制 ， 在 超过 流量 限制 后 ， 服 务 商 可 能 会 限制 网 站 的 速度 (或 
完全 禁止 你 的 网 站 ) o 


11.10.1 内 容 分 发 网 络 
可 以 使 用 内 容 分 发 网 络 (Content Delivery Network，CDN) 作为 网 站 托管 解决 方案 的 一 部 
分 。 当 使 用 CDN 时 ， 网 站 的 所 有 文件 不 是 都 驻 留 在 一 台 服 务 器 上 ， 而 是 多 个 副本 文件 被 
复制 到 不 同 地 点 的 数据 中 心 的 多 台 服 务 器 上 。 当 用 户 向 网 站 请 求 内 容 时 ，CDN 将 根据 地 理 
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位 置 、 当 前 网 络 流量 模式 等 因素 将 请 求 分 发 至 最 优 的 服务 器 。 
这 有 助 于 提升 任何 站 点 的 性 能 ， 虽 然 说 它 对 实时 、 流 媒体 或 大 流量 网 站 尤其 管用 。 


一 个 网 站 可 以 选择 只 托管 部 分 内 容 在 CDN 上 。 例 如 ， 一 个 大 流量 的 电子 商务 网 站 可 以 将 
其 所 有 的 图 片 托管 在 CDN 上 (因为 网 站 有 非常 多 的 大 图 片 )， 而 将 其 他 内 容 托 管 在 普通 的 
主机 上 。 
































你 可 以 在 购买 网 站 主机 时 附带 购买 CDN 服务 ， 或 者 单独 从 某 些 公司 购买 (通常 是 互联 网 
服务 提供 商 )。 对 于 非常 小 的 网 站 价格 可 能 只 要 10 美元 / 月 ， 而 大 型 网 站 所 需 的 费用 可 能 


高 达 每 月 数 千 美元 。 


11.10.2 内容 管理 系统 
CMS (内 容 管理 系统 ) 也 可 能 拖 慢 你 的 网 站 。 企 业 级 CMS 比 简单 的 个 人 CMS (比如 
WordPress 或 Drupal) 问题 更 大 。 























CMS 响应 浏览 器 发 送 网 页 的 请 求 时 ， 需 要 做 很 多 的 工作 ， 而 不 仅仅 如 发 送 一 个 纯 HTML 
页 面 那么 简单 。 你 的 整个 网 站 数据 都 包含 在 一 个 数据 库 中 ，CMS 将 运行 一 堆 的 查询 来 实时 
拼装 出 页 面 上 所 有 独立 的 元 素 一 一 导航 、 内 容 、 插 件 。 


理想 状况 下 ， 这 会 很 快 完成 ， 但 很 多 事情 可 能 出 错 并 增加 延 时 。 


















































研究 表明 在 不 同 的 CMS 之 间 存 在 明显 的 性 能 差异 ， 所 以 在 CMS 选 型 时 应 研究 对 比 它们 的 
性 能 。 





如 果 你 已 经 有 一 个 CMS， 检 查 所 有 的 设置 以 确保 你 已 经 打开 了 所 有 可 以 提高 性 能 的 选项 。 


始终 确保 你 所 用 的 CMS 及 其 插件 为 最 新 的 版 本 ， 过 时 的 软件 运行 速度 往往 较 慢 ， 并 可 能 
导致 冲突 ， 因 而 增加 延 时 。 


11.11 有 条 件 地 加 载 内 容 


前 面 已 多 次 提 到 过 ， 我 们 要 尽力 确保 相同 的 内 容 可 用 于 所 有 用 户 ， 而 不 管用 户 使 用 的 是 什 
么 设备 。 但 是 这 并 不 意味 着 在 同一 时 间 的 同一 个 页 面 上 所 有 的 内 容 都 要 是 一 览 无 遗 的 。 

例如 ， 对 于 正文 ， 可 能 会 有 补充 内 容 ， 在 宽屏 视图 中 能 很 容易 地 将 其 安放 在 侧 边栏 中 。 但 
在 窗 屏 视图 上 ， 你 不 想 占 用 一 大 块 屏幕 空间 来 显示 该 内 容 ， 但 你 仍 会 给 用 户 一 个 查看 它 的 


这 就 是 条 件 加 载 的 用 武之 地 。 这 种 技术 使 用 JavaScript 查询 浏览 器 窗口 的 宽度 〈 类 似 于 一 
个 CSS 媒体 查询 )， 然 后 仅 在 大 于 最 小 尺寸 的 屏幕 上 运行 一 个 函数 来 显示 补充 内 容 。 







































































[ 小 贴 士 ] 
用 户 能 够 接受 网 站 依据 屏幕 的 大 小 显示 不 同 的 内 容 ， 只 要 他 们 能 够 用 另 一 种 方式 访问 那些 被 
隐藏 的 内 容 ， 在 本 案例 中 ， 小 屏幕 的 用 户 只 需 点 击 链接 即 可 查看 补充 内 容 。 


Jeremy Keith 在 24 Ways 上 阐述 了 这 种 技术 “Conditional Loading for Responsive Designs" 
(http:/24ways.org/2011/conditional-loading-for-responsive-designs/) 。 


方便 起 见 ， 我 们 直接 使 用 Keith 文章 中 的 例子 ， 假 设 你 想 要 以 列表 形式 提供 谷歌 新 闻 中 与 
“ 猫 ” 相 关 的 最 新 的 新 闻 报 道 。 








在 小 屏幕 上 ， 你 不 想 包含 所 有 的 新 闻 ， 那 你 可 以 就 只 放 一 个 链接 ， 它 指向 相关 话题 的 谷歌 
新 闻 搜索 结果 页 面 : 


«div id="newsresults"> 
«a href-"http://www.google.com/ 
search?q-cats&tbm-nws"»Search Google News for Cats 
«/a» 

«/div» 


然后 在 页 尾 添加 一 个 JavaScript 国 数 ， 该 函数 将 在 页 面 宽度 足够 时 用 谷歌 搜索 结果 替换 id 属 
性 为 newsresults 的 «div» 元 素 中 的 内 容 (如 果 想 看 看 实现 代码 ， 请 查看 Keith 的 文章 ) : 





<script> 
if (document.documentElement.clientWidth > 640) { 
searchNews( ‘cats’ ); 


</script> 





如 果 视 口 宽 于 640 像素 ， 将 会 运行 searchNews 函数 并 改变 ia 属性 为 newsresults 的 
«div» 元 素 去 显示 完全 不 同 的 HTML 内 容 一 一 新 闻 列 表 ， 包 含 标 题 、 链 接 和 描述 ， 如 图 





























11-6 所 示 。 
A Metaphysical Reflection Upon The More about cats... 
Nature Of Multitudinous Feline Affection p. the internet loves cats ~ not 
logs 
By Debbie the Online Dater 
The internet is one glant, virtual cat park, its 
Tiove cats. foundation is one of cat fur, and its currency More about cats... 
Howe every kind of cat. is the miaows of millions of kittens who lie 
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& 11-6: 条 件 加 载 的 一 个 例子 


你 需要 记 住 的 是 ， 条 件 加 载 只 能 在 可 运行 JavaScript 的 六 览 器 中 工作 。 但 这 也 算 不 上 是 一 
个 大 问题 ， 因 为 那些 没有 JavaScript 的 用 户 会 获得 默认 的 (小 屏幕 ) 内 容 ， 比 如 用 一 个 链 
接 代替 了 新 闻 列 表 。 他 们 实际 上 并 不 会 丢失 任何 东西 。 














另外 需要 注意 的 是 ， 不 像 CSS， 只 要 条 件 发 生变 化 其 就 会 自动 重新 浑 当 页 面 ，JavaScript 
国 数 将 只 运行 一 次 。 所 以 如 果 视 口 的 宽度 发 生 改 变 ， 比 如 设备 从 竖 排 方向 转 为 横 排 方向 ， 
布局 将 不 会 像 CSS 那样 能 凭借 媒体 查询 自动 重新 适 配 新 的 视 口 尺寸 。 

当然 ， 使 用 这 个 功能 意味 着 小 屏幕 用 户 将 加 载 一 堆 他 们 不 需要 的 JavaScript。 但 是 如 果 能 
避免 他 们 加 载 大 量 不 需要 出 现在 页 面 上 的 内 容 ， 这 是 值得 的 。 


人 s 
11.12 2450A 
即使 浏览 器 完全 浑 当 完 毕 页 面 ， 仍 会 有 很 多 事情 可 能 发 生 。 


有 时 一 个 元 素 的 视觉 外 观 在 页 面 加 载 完 后 可 能 会 改变 。 比 如 当 鼠 标 光 标 悬 停 在 链接 上 时 其 
颜色 会 产生 变化 。 当 浏览 器 需要 做 出 这 样 的 改变 时 ， 称 为 重 绘 。 

其 他 时 候 ， 页 面 的 布局 可 能 会 发 生变 化 。 例 如 ， 当 用 户 改 变 浏 览 器 窗口 大 小 时 (或 将 设 
从 竖 排 方向 转 成 横 排 方向 时 )， 弹 性 元 素 将 会 改变 其 大 小 及 内 容 ， 比 如 文本 将 会 移动 位 置 
以 适应 这 一 变化 。 页 面 布局 的 改变 称 为 回流 (reflow), 




























































































当 我 们 在 响应 式 设计 或 移动 版 网 站 这 个 限定 条 件 下 谈论 “性 能 ”时 ， 我 们 通常 指 的 是 加 载 
页 面 所 花 去 的 总 的 时 间 。 但 在 页 面 加 载 完毕 后 其 外 观 的 后 续 改 变 也 可 能 或 快 或 或 慢 ， 这 取 
决 于 代码 是 如 何 编写 的 。 




















上 面 举 的 例子 都 很 简单 ， 用 户 会 立即 感知 到 发 生 了 变化 。 但 还 有 许多 其 他 事情 可 能 导致 重 
绘 和 回流 ， 比 如 当 页 面 上 有 复杂 的 CSS 动画 时 ， 或 者 使 用 JavaScript 操纵 页 面 时 ， 并 且 在 
这 种 改变 完成 之 前 可 能 会 有 明显 的 延迟 。 
这 种 情况 并 非 是 响应 式 网 站 所 特有 ， 它 本 质 上 是 技术 问题 ， 超 出 了 本 书 的 范围 。 但 在 为 移 
动 设备 优先 设计 的 情境 下 ， 你 需要 意识 到 ， 移 动 设 备 的 性 能 往往 不 如 台式 电脑 ， 因 此 重 绘 
和 回流 可 能 会 明显 变 慢 并 会 产生 你 在 台式 电脑 上 开发 网 站 时 所 遇 不 到 的 问题 。 
























































想 了 解 更 多 有 关 该 主题 的 信息 ， 参 考 Nicole Sullivan 的 博客 文章 “Reflows & Repaints: CSS 
Performance Making Your JavaScript Slow?” (http://www.stubbornella.org/content/2009/03/27/ 


reflows-repaintscss-performance-making-your-javascript-slow/) 。 


11.13 RESS 


RESS (responsive design + server-side component) 表示 响应 式 设计 加 服务 器 端 组件， 人 们 
对 此 存在 一 定 的 争议 。RESS 的 想法 是 ， 你 可 以 使 用 响应 式 设计 制作 一 个 网 站 ， 但 同时 也 
使 用 服务 器 端 解决 方案 来 只 发 送 特定 设备 所 需 的 代码 和 文件 。 


因此 ， 尽 管 对 于 一 个 网 站 你 只 有 一 套 代 码 ， 且 代码 允许 网 站 响应 所 有 的 视 口 宽度 ， 但 网 
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站 的 某 些 部 分 仍 可 以 基于 浏览 设备 的 不 同 而 有 不 同 的 实现 。Luke Wroblewski 在 2011 所 写 
的 文章 “RESS: Responsive Design + Server-Side Component” 中 详细 描述 了 RESS (http:// 
www.lukew.com/ff/entry.asp?1392) 。 








要 理解 RESS 是 如 何 工作 的 ， 可 以 想象 一 个 响应 式 网 站 ， 在 小 屏幕 上 有 一 个 下 拉 导 航 菜单 ， 
在 大 屏幕 上 是 一 个 横向 导航 栏 。 两 者 的 HTML 代码 是 相同 的 ， 但 媒体 查询 允许 你 根据 屏幕 
尺寸 应 用 不 同 的 CSS， 使 得 它 在 不 同 的 屏幕 上 看 上 去 是 不 一 样 的 。 

使 用 RESS， 服 务 器 将 检查 设备 是 否 是 移动 设备 ， 并 对 移动 和 非 移动 设备 发 送 不 同 的 导航 
HTML/CSS 代码 段 。 这 样 ， 每 台 设备 只 得 到 它 需 要 的 代码 ， 与 之 相对 ， 在 响应 式 设计 中 ， 
每 个 设备 都 要 下 载 所 有 的 代码 ， 不 管 它 是 否 需 要 。 


























RESS 需要 使 用 后 台 编 程 语言 (比如 PHP)， 而 不 仅仅 是 HTML/CSS/JavaScript， 因 此 它 要 
比 基 本 的 响应 式 设计 更 难 一 些 。 


除了 检测 是 否 是 移动 设备 在 请 求 页 面 ， 服 务 器 还 可 以 检测 设备 特性 ， 并 基于 此 发 送 不 同 的 
代码 。 你 也 可 以 用 JavaScript 库 Modernizr (http://modernizr.com) 来 检测 设备 特性 。 


























RESS 示 例 


圣母 大 学 网 站 除 采用 响应 式 设 计 外 ， 还 使 用 RESS 来 为 桌面 和 移动 用 户 分 别提 供 不 同 的 
内 容 。 


桌面 版 网 站 中 各 主要 部 分 (关于 、 学 术 水 平 、 招 生 等 ) 全 都 在 一 个 页 面 上 。 在 图 11-7 中 ， 
左边 部 分 是 桌面 网 站 的 上 半 段 页 面 ， 招 生 部 分 还 处 在 箭头 所 示 的 更 下 方 的 页 面 中 ， 如 果 调 
整 桌 面 浏览 器 宽度 至 320 像素 并 载 入 网 站 ， 如 图 的 中 间 部 分 ， 你 仍 能 看 到 所 有 的 内 容 ， 只 
不 过 所 有 内 容 被 媒体 查询 重 排 成 一 列 。 图 的 右边 部 分 则 显示 了 网 站 在 智能 手机 中 加 载 后 的 
样子 一 一 那 就 是 手机 中 能 看 到 全 部 内 容 。 


在 手机 上 ， 你 仍 能 访问 到 主要 的 内 容 部 分 ， 比 如 招生 ， 但 现在 它们 都 变 成 了 一 个 单独 的 页 
而 ， 而 不 是 放 在 主页 的 更 下 方 的 位 置 。 可 是 你 失去 了 内 容 平等 的 权利 ， 因 为 智能 手机 版 网 
站 缺失 了 许多 桌面 版 网 站 中 的 内 容 。 


我 个 人 不 喜欢 所 有 内 容 都 在 一 个 页 面 上 的 网 站 ， 这 样 的 网 站 通过 错 点 链接 访问 各 个 内 容 部 
分 ， 使 它 看 起 来 像 是 单独 的 页 面 但 实际 并 不 是 。 用 户 很 容易 迷失 在 页 面 中 ， 并 且 如 果 他 想 
分 享 特定 的 内 容 ， 会 发 现 无 法 简单 地 从 浏览 器 地 址 栏 复 制 网 址 ， 因 为 这 个 网 址 就 是 主页 的 
网 址 。( 圣 母 大 学 网 站 的 主页 甚至 未 使 用 真正 的 锚 点 链接 ， 锚 点 链接 在 网 址 的 末尾 附加 了 
额外 的 标识 ， 人 允许 你 链接 到 页 面 的 特定 部 分 ， 比 如 ffadmissions, ) 


欣慰 的 是 对 于 手机 用 户 ， 他 们 没有 将 所 有 内 容 放 在 一 个 页 面 上 ， 因 为 在 小 屏幕 上 浏览 那么 
长 的 页 面 有 点 困难 。 但 我 也 不 认可 他 们 在 一 个 页 面 上 向 桌面 和 笔记 本 电脑 用 户 展示 所 有 的 
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内 容 。 这 不 仅 容 易 让 人 党 头 转向 ， 还 意味 着 过 重 的 页 面 重量 ， 并 不 是 每 个 用 笔记 本 电脑 访 
问 的 用 户 都 有 一 个 快速 的 网 络 连 接 ， 特 别 是 在 校园 里 携带 自己 笔记 本 电脑 的 学 生 ， 可 能 
没有 良好 的 WiFi 信号。 
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图 11-7. 手机 上 的 圣母 大 学 网 站 是 一 个 完全 不 同 的 版 本 


11.14 总 结 

网 站 的 性 能 应 该 被 看 作 是 网 站 设计 的 一 部 分 ， 因 为 它 会 极 大 地 影响 到 网 站 的 用 户 体验 。 如 
果 从 项 目 一 开始 就 券 虑 妥当 ， 而 不 是 试图 在 最 后 才 去 解决 性 能 问题 ， 你 能 把 性 能 优化 工作 
做 得 更 好 。 

有 许多 工具 可 以 用 来 测量 性 能 ， 它 们 能 明确 指出 是 什么 拖 慢 了 你 的 网 站 并 告诉 你 需要 去 修 
复 什 么 。 

你 需要 从 编写 良好 的 HTML, CSS 和 JavaScript 代码 开始 。 代 码 应 该 是 简单 直接 不 重复 的 。 
可 以 使 用 缩小 工具 减 小 文件 的 大 小 ， 去 除 多余 的 空白 字符 。 
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提高 网 站 性 能 的 一 个 最 有 效 方法 就 是 减少 对 服务 器 的 HTTP 请 求 数量 。 可 以 通过 合并 
CSS, JavaScript 或 图 片 文 件 来 实现 此 目的 。 第 三 方 代码 也 可 能 产生 过 多 的 HTTP 请 求 ， 所 
以 一 定 要 对 添加 到 网 站 中 的 插件 及 其 他 代码 进行 仔细 复核 。 


检查 服务 器 设置 ， 从 避免 不 必要 的 重 定向 开始 来 设置 你 的 网 站 。 你 还 须要 检查 服务 器 是 否 
打开 了 文件 压缩 选项 并 允许 浏览 器 缓存 。 

JavaScript 会 对 网 站 性 能 造成 影响 ， 特 别 是 那些 会 阻塞 站 点 内 容 加 载 和 渲染 的 JavaScript 脚 
本 。 可 以 通过 使 用 内 联 脚本 、 延 迟 加 载 、 推 迟 执行 来 解决 阻塞 问题 。 

确保 在 所 有 的 页 面 上 只 加 载 需要 的 JavaScript 和 CSS， 并 在 可 能 的 情况 下 用 HTML/ CSS £f 
代 脚 本 。 























托管 主机 也 会 影响 性 能 。 确 保 你 为 自己 主机 所 选择 的 公司 及 主机 计划 在 性 能 上 有 良好 的 口 
碑 。 还 可 以 使 用 内 容 分 发 网 络 来 加 速 网 站 ， 并 确保 内 容 管 理 系统 不 会 减 慢 网 站 的 速度 。 


有 条 件 地 加 载 内 容 或 者 使 用 RESS (响应 式 设计 十 服务 器 端 组 件 ) 都 有 助 于 提高 性 能 。 
总 之 ， 良 好 的 性 能 来 产 于 将 大 量 有 助 于 提升 性 能 的 方法 融入 到 网 站 的 创建 过 程 中 。 
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O'REILLY” 





学 习 响 应 式 设计 


想 要 为 平板 、 手 机 、 笔 记 本 、 大 屏幕 设备 ， 甚 至 可 穿戴 设备 提供 最 优 的 
用 户 体验 ? 那 就 学 习 响 应 式 设 计 吧 。 这 是 一 本 内 容 特 别 全 面 、 讲 解 非常 
透彻 的 入 门 书 。 特 别 地 ， 通 过 这 本 书 不 仅 能 迅速 掌握 响应 式 Web 设 计 的 
基本 原理 ， 还 能 够 从 头 到 尾 了 解 响应 式 设 计 的 工作 流程 : 从 项 目 启动 开 
台 ， 到 项 目 最 终 上 线 为 止 。 


只 要 你 的 工作 与 创建 、 改 造 或 者 升级 网 站 有 关系 ， 都 应 该 看 看 这 本 书 。 
换 句 话说 ,不 仅 是 前 端 开发 人 员 ， 设 计 师 、 产 品 经 理 、 项 目 经 理 ， 甚 至 
后 端 开发 人 员 也 可 以 通过 本 书 掌握 响应 式 设计 的 精髓 所 在 。 这 本 书 基于 
响应 式 设计 的 前 沿 技 术 和 社区 经 验 写成 ,汇集 了 前 人 的 智慧 和 最 佳 实 
践 。 希 望 读者 能 够 “站 在 巨人 的 肩膀 上 ”， 把 这 本 书 的 内 容 应 用 到 未 来 
的 项 目 中 ， 造 福 更 多 用 户 。 


m 内 容 策略 的 制定 应 先 于 视觉 设计 

m 默认 设计 应 针对 最 窄 屏幕 宽度 进行 

m 响应 式 Web 设 计 的 关键 : HTML 元 素 和 CSS 属 性 

m 基于 设备 视 口 宽度 ， 通 过 媒体 查询 显示 不 同 的 CSS 样 式 
m 处 理 图 像 、 文 字 排版 和 导航 

m 采用 性 能 优化 技术 建立 更 轻 量 级 、 更 快 的 网 站 
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